Vue Router

Vue Router  还是看官网吧！

一、安装

要想做单页面应用，就必须使用vue-router。

npm install vue-router --save

二、起步

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
// 1.定义 (路由) 组件，可以从其他文件 import 进来
import Vcar from './components/Vcar'
import Vhouse from './components/Vhouse'
import Vfruit from './components/Vfruit'

Vue.use(VueRouter)

// 2.定义路由，每个路由应该映射一个组件。
const routes = [
    { path: '/car', component: Vcar },
    { path: '/house', component: Vhouse },
    { path: '/fruit', component: Vfruit },
]

// 3.创建 router 实例，然后传 "routes" 配置，还可以传别的配置参数
const router = new VueRouter({
    routes, // 相当于 routes: routes
    mode: 'history',
})

new Vue({
    el: '#app',
    router, // 4.创建和挂载根实例，通过 router 配置参数注入路由，从而让整个应用都有路由功能
    render: h => h(App)
})

通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由。

App.vue

<template>
    <div id="app">
        <h3>Hello App!</h3>
        <p>
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/car">car</router-link>
            <router-link to="/house">house</router-link>
            <router-link to="/fruit">fruit</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
</template>