一、安装依赖
1. Vue-router模块
Vue的路由功能主要依靠Vue-router模块来实现，所以必须在项目中安装该依赖模块
npm i Vue-router
2. Vue.use()明确说明要使用路由
import VueRouter from 'vue-router'
Vue.use(VueRouter)
二、使用路由的4大步骤
1. 定义（路由）组件
组件可以从其他文件import进来
//导入组件
import Header from './layout/header.vue'
import Footer from './layout/footer.jsx'
//定义组件
const Foo = { template: '<div>foo</div>' }
2. 定义路由
定义一个路由有很多选项，比如路由的路径path，name，组件等等。所有定义的路由被放到一个数组里，每个定义路由用对象形式。
// 定义路由
export default [
//一个简单的路由
{
path: '/',
redirect: '/app'
},
//一个写了较多配置的路由
{
path: '/app/:id',
props: (route) => ({ id: route.query.b }), // 可以将id以props的形式传给Todo组件
component: () => import('../views/todo/todo.vue'),
name: 'app',
meta: {
title: 'this is app',
description: 'i am apple'
},
beforeEnter (to, from, next) {
console.log('app route before enter')
next()
}
children: [
{
path: 'test',
component: Login
}
]
},
]
3. 创建router实例，然后把第2步的配置传进来
const router = new ({
routes: routes //或者直接缩写routes
}）
4. 在根实例注入路由实例
从根实例注入第3步创建的路由实例，则整个应用都有路由功能
new Vue({
router, //这样就把第3步创建的router实例注入到了根实例
render: (h) => h(App)
}).$mount('#root') // mount(root),将App组件挂载到入口文件index.js的root这个dom元素上
三、在模板文件进行路由导航
1. <router-link>导航【this.$router.push({path:"})】
router-link的导航方式有以下几种
@1 : 直接在to属性指明路由路径进行匹配路由
<router-link to="/app/123">app123</router-link>
@2 : 使用v:bind:path匹配路由定义的name选项，进而达到路由的目的
<router-link :to="{ path: "/app/123" }"> app123 </router-link>
<router-link :to="{ path: "/app",params: { userId: 123 } }"> app123 </router-link>
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
@3 :使用name来路由
注意：这种方式 to前面一定要加v-bind(:),这样才会编译，否则，会把to当原来的属性，认为to的内容就是路径
<router-link :to="{ name: 'app', params: { userId: 123 }}">User</router-link>
2. <router-view>渲染
在router-link导航到的路由，将会把这个路由的匹配组件内容渲染到router-view所在的位置。
router-view只有一个name属性，用于区分多个路由渲染的不同的位置。
