基本结构router-link to
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>hello APP!</h1>
<p>
<!-- router-link组件 导航-->
<!--通过传入to属性指定链接-->
<!-- <router-link>会被渲染成一个<a>标签-->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!--路由出口-->
<!-- 路由匹配到的组件将会渲染在这里-->
<router-view></router-view>
</div>
<script>
//如果使用模块化机制编程,导入Vue和VueRouter,要调用Vue.use(VueRouter)
//1、定义路由组件,也可以从其他文件import进来
const Foo={template:'<div>foo</div>'}
const Bar={template:'<div>bar</div>'}
//2、定义路由
//每个路由应该映射一个组件,其中“component”可以是通过Vue.extend()创建的组件构造器
//也可以是一个组件配置对象
const routes=[
{path:'/foo',component:Foo},
{path:'/bar',component:Bar}
]
//3、创建router实例,然后传‘routes'配置
const router=new VueRouter({
routes//缩写:相当于router:routes
})
//4、创建和挂载根实例
//记得要通过router配置参数注入路由
//从而让整个应用都有路由功能
const app=new Vue({
router
}).$mount('#app')
//现在应用已经启动了
</script>
</body>
</html>
router的步骤(定义路由+定义组件+创建实例+挂载)
- 如果模块化编程的话,需要调用Vue/use(VueRouter)
- 定义路由组件,也可以从其他文件import过来
const Foo={template:''<div>foo</div>}
其中夹在div中间的foo是点击后希望出现的内容,出现在<router-view>
中 - 定义路由,每个路由都会映射一个组件
const routes=[{path:'/foo',component:Foo}]
其中/foo是在router-link to指向的链接,而Component是上面刚刚定义过的Foo - 创建router实例,然后传‘routes’配置
const router=new VueRouter({routes//或者是router:routes})
- 创建和挂载根实例,要通过router的配置注入路由,从而整个应用都有路由功能
const app=new Vue({router]).$mount('#app')
动态路由匹配
- 目的:把某种模式匹配到的所有路由,全都映射到同个组件
const User={
template:'<div>User</div>'
}
const router=new VueRouter({
routes:[
//动态路径参数 以冒号开头
{path:'/user/:id',component:User}
]
})
- 在这种模式下
/user/xiaoming
和/user/lili
都将映射到相同的路由 - 一个“路径参数”使用冒号:标记。当匹配到一个路由时,参数值会被设置到
this.$route.params
,可以在每个组件内使用。于是我们可以更新User的模板,输出当前用户的ID:
const User={
template:'<div>User{{$route.params.id}}</div>'
}
- 可以在一个路由中设置多段参数,对应的值都会设置到
$route.params
中
模式 | 匹配路径 |
---|---|
/user/:username | /user/Mike |
/user/:username/post/:post_id | /user/Mike/post/12138 |
响应路由参数的变化
- 使用路由参数时,从
/user/foo
导航到/user/bar
,原来的组件实例会被复用。因为两个路由都渲染同个组件,比销毁再创建,复用给高效。同时意味着,组件的生命周期钩子不会再被调用 - 复用组件时,想对路由参数的变化作出响应的话,你可以简单地watch(监测变化)$route对象或者引入beforeRouteUpdate导航守卫:
const User={
template:'...',
watch:{
$route(to,from){
//对路由变化做出响应
}
}
}
const User={
template:'...',
beforeRouteUpdate(to,from,next){
//对路由变化做出响应
//不要忘记next()
}
捕获所有路由或404Not found 路由
通配符*上场了!!!!
{
//会匹配所有路径
path:'*'//通常用于客户端404错误
}
{
//会匹配以‘/user-’开头的任意路径
path:'/user-*'
}
当使用一个通配符时,$route.params
会自动添加一个名为pathMatch参数。它包含了URL通过通配符被匹配的部分:
//给出一个路由{path:'/user-*'}
this.$route.push('/user-admin')
this.$route.params.pathMatch//'admin'
//给出一个路由{path:'*'}
this.$router.push('/non-existing')
this.$route.params.pathMatch//'non-existing'
匹配优先级
- 同一个路径可以匹配多个路由,此时,匹配的优先级就按照路由的定义顺序:谁先定义的,谁的优先级就最高
嵌套路由
const router=new VueRouter({
routes:[
{path:'/user/:id',component:User,
children:[
{
//当/user/:id/profile 匹配成功
//UserProfile 会被渲染在User的<router-view>中
path:'profile',
component:UserProfile
},
{
//当/user/:id/posts 匹配成功
//UserPosts 会被渲染在User的<router-view>
path:'posts',
component:UserPosts
},
{
//当/user/:id 匹配成功
path:'',
componnet:UserHome
}]}]})
- 以/开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径
编程式导航
除了使用<router-link>
创建a标签来定义导航链接,我们还可以借助router的实例方法,通过编写代码来实现。
router.push(location,onComplete?,onAbort?)
- 在Vue实例内部,可以通过$router访问路由实例。
- 想要得到不同的URL,则使用
router.push
方法。这个方法会向history栈添加一个新的记录,所以,当用户点击后退按钮,回到之前的URL <router-link :to="..."
等同于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,params会被忽略,上述例子中的query并不属于这种情况
const userId='123'
router.push({name:'user',params:{userId}})// /user/123
router.push({path:'/user/${userId}'})// /user/123
router.push({path:'/user',params:{userId]}) // /user (params不生效)
router.replace(location,onComplete?,onAbort?)
跟router.push
很像,唯一的不同就是,它不会向history添加新纪录,而是替换当前的history记录。
声明式 | 编程式 |
---|---|
<router-link :to="..." replace> | router.replace(...) |
router.go(n)
这个方法的参数是一个整数,意思是在history记录中向前或者后退多少步,类似window.history.go(n)
//在浏览器记录中前进一步,等同于history.forward()
router.go(1)
//在浏览器中后退一步记录,等同于history.back()
router.go(-1)
//前进三步记录
router.go(3)
//如果history记录不够用,就失败
router.go(100)
router.go(100)