1.安装和引用
npm install vue-router --save-dev (如果在用vue-cli构建项目的时候已经使用安装略过)
引用router
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
Vue.use(Router) //Vue全局使用Router
2.项目router文件的简单说明
export default new Router({
routes: [
{
path: '/', //项目的路径
name: 'Login', //路由的名称
component: Login //路由绑定的组件
}
]
})
3. 跳转标签 <router-link>
创建组件Page1
<template>
<router-link to="/p2">P2</router-link>
</template>
<script>
export default {
data:{
}
}
创建组件Page2
<template>
<div>
{{ msg }}
</div>
</template>
<script>
export default {
data(){
return {
msg:'Page2'
}
}
}
</script>
4.参数传递
1.根据<router-link> 的to传参
1.我们之前配置路由的时候，有一个name参数，现在派上用场了
在Page1.vue 加上
<router-link :to="{name:'p2',params:{name:'ray'}}">携带参数name=ray</router-link>
在Page2.vue 加上
{{$route.params.name}}
2.URL传参（restful 风格）
新建UrlParam组件
<template>
<div>
{{ name }}
</div>
</template>
<script>
export default {
data(){
return {
name:'UrlParam 组件页面'
}
}
}
</script>
在router中的index.js 新增一个配置
{
path: '/param/:name/:age/:desc',
component: UrlParam
}
在Page1组件中添加跳转到UrlParam的链接
<p>
<router-link to="/param/ray/18/hello">restful风格传递参数</router-link>
</p>
最后在显示传过来的值
{{ $route.params.name }} , {{ $route.params.age }} , {{ $route.params.desc }}
最终结果
image.png
在router配置哪里，path配置的路径可以包含正则表达式
{
path: '/param/:name/:age(\\d+)/:desc',
component: UrlParam
}
表明age传参的时候只有数字才可以
5. 子路由
子路由的情况一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改变样式
创建子路由组件ChildPage
<template>
<div>
{{ msg }}
</div>
</template>
<script>
export default {
data(){
return {
msg:'我是页面1'
}
}
}
</script>
在Page1路由配置那里加上children配置
{
path: '/page1',
component: Page1,
name: 'Page1',
children:[
{
path: 'child',
component: ChildPage,
name: 'ChildPage'
}
]
}
不要忘记导入这个ChildPage组件
import ChildPage from '@/components/router-demo/ChildPage'
在Page1组件template中加上
<router-link to="/page1/child">跳转到子页面</router-link>
关键来了，我们需要用<router-view>来规定其他组件嵌套进当前组件显示的区域
<router-view></router-view>
我们点击跳转到子页面
image.png
证明子页面的内容已经嵌套入page1组件了
6.单页面多路由的情况
实际上我们多数情况下会遇到一个组件中可能需要存在多个<router-view>
我们再App.vue组件中多加两个<router-view>
<router-view ></router-view>
<router-view name="left" style="float:left;width:50%;"></router-view>
<router-view name="right" style="float:right;width:50%;"></router-view>
在路由配置里面再加
{
path: '/moreroute',
name: 'MoreRoute',
components:{
default: HelloWorld,
left: ChildPage,
right: ChildPage2
}
}
注意，是components 不是 component
default 表示第一个没命名的视图
最后结果
image.png
7.编程导航（在业务逻辑代码中实现跳转）
相当于浏览器的前进和后退
//后退
this.$router.go(-1)
//前进
this.$router.go(1)
实现跳转
跳转到/home
2.this.$router.push('/home')
