路由的基本概念
路由是一个比较广义和抽象的概念,路由的本质就是一种对应关系.
前端路由的基本概念:根据不同的事件来显示不同的页面内容,即事件与事件处理函数之间的对应关系
vue-router的基本使用
-
介绍
- 它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器,推荐使用
- Vue Router和Vue.js非常契合,可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发
- Vue Router依赖于Vue,所以需要先引入Vue,再引入Vue Router
- 官网:https://router.vuejs.org/zh/
-
Vue Router的特性:
- 支持H5历史模式或者hash模式
- 支持嵌套路由
- 支持路由参数
- 支持编程式路由
- 支持命名路由
- ....
-
基本使用步骤
- 1.导入js文件
// 导入vue文件 <script src="./lib/vue_2.5.22.js"></script> //导入vue-router文件 <script src="./lib/vue-router_3.0.2.js"></script>
- 2.添加路由链接
// router-link 是vue 中提供的标签,默认会被渲染为a标签 // to属性默认会被渲染为 href 属性 // to属性的值默认会被渲染为#开头的hash地址 <router-link to='/user'>User</router-link>
- 3.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)
//路由填充位也叫做路由占位符 <router-view></router-view>
- 4.定义路由组件
var User = { template:'<div>User</div>' }
- 5.配置路由规则并创建路由实例
// 创建路由实例对象 const router = new VueRouter({ // 所有的路由规则 (与之前的onhashchange的目的是一样的) routes: [//这个就是前端路由的具体体现 // 每一个路由规则都是一个对象,包含path和component属性 { path: '/user', component: User } ] })
- 6.将路由挂载到Vue实例中
// 创建 vm 实例对象 const vm = new Vue({ // 指定控制的区域 el: '#app', data: {}, // router: router router })
路由重定向
router-view默认显示的组件,需要通过路由重定向来实现
const router = new VueRouter({
// 所有的路由规则
routes: [
{ path: '/', redirect: '/user'},//增加这一行代码,如果访问跟路径/,则重定向到/user
{ path: '/user', component: User },
{ path: '/register', component: Register }
]
})
嵌套路由
//1.父路由组件模板
<div id="app">
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
//2. 子路由模板
const Register = {
template: `<div>
<h1>Register 组件</h1>
<hr/>
<!-- 子路由链接 -->
<router-link to="/register/tab1">tab1</router-link>
<router-link to="/register/tab2">tab2</router-link>
<!-- 子路由的占位符 -->
<router-view />
<div>`
}
//3.路由嵌套配置
const router = new VueRouter({
// 所有的路由规则
routes: [
{ path: '/', redirect: '/user'},
{ path: '/user', component: User },
// children 数组表示子路由规则
{ path: '/register', component: Register, children: [
{ path: '/register/tab1', component: Tab1 },
{ path: '/register/tab2', component: Tab2 }
] }
]
})
动态路由匹配
- 匹配规则定义时,动态路由语法为 :参数名,以冒号开头,就代表是动态匹配
- 路由组件定义时,获取路由参数为:{{$route.params.参数名}}
- $route.params.是固定写法
- Vue实例的属性,都是$开头,比如$el
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
- 创建Vue实例时,传递的参数有:el,data,router
- 那么vm有了$el,$data,$router属性
- 但是获取动态参数,是**{{$route.params.参数名}}**
- $route是vm对象中的属性,专门用于获取动态参数
<div id="app">
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
const User = {
template: '<h1>User 组件 -- 用户id为: {{$route.params.id}}</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{ path: '/', redirect: '/user'},
{ path: '/user/:id', component: User }
]
})
// 创建 vm 实例对象
const vm = new Vue({
el: '#app',
data: {},
router
})
路由组件传递参数
- props的值为布尔类型
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{ path: '/', redirect: '/user'},
{ path: '/user/:id', component: User, props: true }
]
})
const User = {
props: ['id'],
template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'
}
在组件的模板中,可以通过插值表达式访问到data和props中的数据属性.
路由定义规则中:props:true,代表给动态参数id,开启props传参(其实就是通过props方式传递参数)
- props的值为对象类型
const User = {
props: ['id', 'uname', 'age'],
//这个id其实是拿不到值的
template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为:{{age}}</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{ path: '/', redirect: '/user'},
{ path: '/user/:id', component: User, props: { uname: 'lisi', age: 20 } }
]
})
- props的值为函数类型
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{ path: '/', redirect: '/user' },
{
path: '/user/:id',
component: User,
props: route => ({ uname: 'zs', age: 20, id: route.params.id })
}
]
})
const User = {
props: ['id', 'uname', 'age'],
template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为:{{age}}</h1>'
}
命名路由
const router = new VueRouter({
routes:[
{
path:'/user/:id',
name:'user',
component:User
}
]
})
<router-link :to="{ name: 'user', params: {id: 3}}">User3</router-link>
编程式导航
const User = {
props: ['id', 'uname', 'age'],
template: `<div>
<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为:{{age}}</h1>
<button @click="goRegister">跳转到注册页面</button>
</div>`,
methods: {
goRegister() {
this.$router.push('/register')//跳转到注册页面(锚点),可以看下效果
}
},
}
const Register = {
template: `<div>
<h1>Register 组件</h1>
<button @click="goBack">后退</button>
</div>`,
methods: {
goBack() {
this.$router.go(-1)//-1:后退1个界面
}
}
}
- push跳转锚点
- go前进后退,参数n一个数字,代表前进后退几个界面
- n,代表前进n个界面
- -n,代表后退n个界面
- push参数
//字符串(路径名称)
router.push('/home')
//对象
router.push({path:'/home'})
//命名的路由(传递参数)
router.push({name:'/user',params:{userId:123}})
//带查询参数,变成/register?name=lisi
router.push({path:'/register',query:{uname:'lisi'}})