共计 4002 个字符，预计需要花费 11 分钟才能阅读完成。
一、起步
<div id="app">
<!-- 应用 router-link 组件来导航，通过传入 to 属性指定链接，最终 router-link 会被渲染成一个 a 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<div class="router-container">
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</div>
<script>
//1、定义路由组件（引入路由组件）const Foo = {template: '<div class="foo"><h2>Foo</h2></div>'}
const Bar = {template: '<div class="bar"><h2>Bar</h2></div>'}
//2、定义路由
const routes = [
{
path: '/foo',
component: Foo
},
{
path: '/bar',
component: Bar
}
]
//3、创立 router 实例
const router = new VueRouter({routes})
let vm = new Vue({
el: '#app',
router
})
</script>二、动静路由
给路由门路设置参数
// 定义路由组件（或引入路由组件）const User ={template: '<div>User {{$route.params.id}}</div>',
// 因参数发生变化，组件会复用，则组件生命周期钩子不会被调用，通过以下两种办法监测路由扭转
// 办法一：应用 watch 监测 $route
//watch:{// $route(to,from){
// // 对路由变动做出响应
// }
//}
// 办法二：beforeRouteUpdate(to,from,next){
// react to route changes...
// don't forget to call next()}
}
// 实例化 vue-router
const router = new VueRouter({
routes:[
{
// 动静门路参数以：冒号结尾
path: '/user/:id',
component: User
}
]
})
传入实参的办法
<!-- 申明式：应用 <router-link> 组件时，应用:to 动静绑定 -->
<router-link :to="{path:'/user/'+user.id}">Go to User</router-link>
// 编程式：应用 router.push 时
router.push({name: 'user',params: {id: user.id}})三、嵌套路由
能够在路由组件中嵌套 <router-view> 标签，作为子路由的进口
// 定义路由组件
cosnt User = {
template: `<div>
<h2>User {{$route.params.id}}</h2>
<router-view></router-view>
</div>`
}
// 定义子路由组件
const UserProfile = {template: '<div>user profile</div>'}应用 children 属性配置子组件
const router = new VueRouter({
routes:[
{
path: '/user/:id',
component: User,
children:[
{
path: '/profile',
component: UserProfile
}
]
}
]
})四、编程试的导航
1、router.push()
除了应用 <router-link> 创立 a 标签来定义导航链接，咱们还能够借助 router 的实例办法，通过编写代码来切换路由。
想要导航到不同的 url, 则应用 router.push()办法，该办法会向 history 栈增加一个新的纪录。
当点击 <router-link> 时，会在外部调用 router.push()办法，所以点击 <router-link :to=”…”> 等同于调用 router.push(…)
router.push()的参数取值如下：
// 字符串
router.push('home')
// 对象
router.push({path: 'home'})
// 命名的路由
router.push({name: 'user', params: { userId: '123'}})
// 带查问参数，变成 /register?plan=private
router.push({path: 'register', query: { plan: 'private'}})若提供了 path, 则 name 会被疏忽。因而在定义带动静参数的路由时，若应用 params，则必须应用 name。to 也实用该规定。
router.push({name:'user',params: {user.id}})
router.push({path: `/user/${user.id}`})
// 上面的写法，params 不会失效
router.push({path:'/user',params:{user.id}})2、router.replace()
跟 router.push()很像，惟一的区别就是它不会向 history 增加新纪录，而是跟它的办法名一样，替换掉以后 history 纪录
申明式：
<router-link :to="..." replace>编程式：
router.replace(...)
3、route.go(n)
参数是一个整数，意思是在 history 纪录中向前或向后退多少步，相似 window.history.go(n)
五、路由命名
应用 name 属性给 route 命名，能够通过 name 链接到该路由
<!-- 应用 router-link-->
<router-link :to="name:'user',params: {userId: 123}">User</router-link>
//...
// 应用 router.push()
router.push({name:'user',params:{userId:123}})这两种办法都会把路由导航到 /user/123 门路
六、命名视图
当须要同级展现多个视图时，而不是嵌套展现时，例如创立一个布局，有 sidebar 和 main 两个视图，咱们能够在界面中领有多个独自命名的视图，应用命名来区别。
<router-view></router-view>
<router-view name='sidebar'></router-view>
<router-view name='mainView'></router-view>多个视图就须要多个组件，确保正确应用 components
const router = new VueRouter({
routes:[
{
path: '/',
components: {
// 未命名的默认为 default
default: HeaderView,
siderbar: Siderbar,
mainView: MainView
}
}
]
})七、重定向和别名
1、重定向 -redirect
重定向：当用户拜访 / a 时，url 会被替换成 /b, 而后匹配路由为 /b
const router = new VueRouter({
routes: [
{
path: '/a',
// 将门路从 '/a' 重定向到 '/b'
//redirect: '/b',
// 重定向的指标也能够是一个命名的路由
//redirect:{name:'foo'}
// 也能够是一个办法，动静返回重定向指标
redirect: to => {
// 办法承受指标门路作为参数
//return 重定向的 字符串门路 / 门路对象
}
}
]
})2、别名 -alias
若 / a 的别名是 /b，则当用户拜访 / b 时，url 会放弃 /b, 但路由匹配为 /a, 就像拜访 / a 一样。
const router = new VueRouter({
routes:[
{
path: '/a',
alias: '/b'
}
]
})八、路由组件传参
在组件中应用 $route 会使之与对应路由造成高度耦合，从而使组件只能在某些特定的 url 上应用。举荐应用 props 将组件和路由解耦
const User = {template: '<div>User {$route.params.id}</div>'
}
const router = new VueRouter({
routes: [
{
path: '/',
component: User,
props: true
},
// 对于蕴含命名视图的路由，必须为每个命名视图增加 props
{
path:'/user/:id',
components:{
default: User,
sildebar: Sidebar
},
props:{
default: true,
sidebar: true
}
}
]
})props 的取值：
1、布尔模式 - 如果 props 被设置为 true,route.params 将会被设置为组件属性
2、对象模式
如果 props 是一个对象，它会被按原样设置为组件属性
const router = new VueRouter({
routes: [
{
path: '/promotion/from-newsletter',
component: Promotion,
props: {newsletterPopup: false}
}
]
})3、函数模式
能够创立一个函数返回 props, 这样能够将参数转换成另一种类型，将动态值与基于路由的值联合。
const router = new VueRouter({
routes: [
{
path: '/search',
component: SearchUser,
props: route => ({query: route.query.q})
}
]
})URL /search?q=vue 会将 {query: ‘vue’} 作为属性传递给 SearchUser 组件。