路由分为两种:后端路由 和 前端路由
(1)后端路由是指根据不同用户的URL请求,返回不同的内容。它的本质就是URL请求地址与服务器资源之间的对应关系。
(2)前端路由是指根据不同的用户事件,显示出不同的页面。它的本质是用户事件和事件处理函数之间的对应关系。
vue-router是Vue.js官方的路由管理器,它包含的功能有:
vue-router的基本使用步骤:
router-link
是vue中提供的标签,默认会被渲染为a标签to
属性默认会被渲染为href属性to
属性的值默认会被渲染为#开头的hash地址router-view
所在的位置定义路由组件
配置路由规则并创建路由实例
routes
是路由规则数组path
和component
两个属性:path
表示当前路由规则匹配的hash
地址component
表示当前路由规则对应要展示的组件例如:
<div id="app">
// 路由链接
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
// 路由占位符
<router-view></router-view>
</div>
<script>
const User = {
template: 'User 组件
'
}
const Register = {
template: 'Register 组件
'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{ path: '/user', component: User },
{ path: '/register', component: Register }
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
</script>
路由重定向是指:用户在访问A页面时,强制用户跳转到地址B,从而展示特定的组建页面。
通过路由规则的redirect
属性,指定一个新的路由地址就可以设置路由的重定向。
const router = new VueRouter({
// 所有的路由规则
routes: [
// path表示需要被重定向的原地址,redirect表示将要被重新定向的新地址。
{ path: '/', redirect:'/user' },
{ path: '/user', component: User },
{ path: '/register', component: Register }
]
})
<div id="app">
// 路由链接
<router-link to="/register">Register</router-link>
// 路由占位符
<router-view></router-view>
</div>
<script>
const Register = {
template: '<div>
<h1>Register 组件</h1>
//子路由连接
<router-link to="/register/tab1">tab1</router-link>
<router-link to="/register/tab2">tab2</router-link>
//子路由占位符
<router-view></router-view>
</div>'
}
// tab1、tab2是Register的两个子组件
const tab1 = {
template:' tab1
'
}
const tab2 = {
template:' tab2
'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
//使用children数组表示子路由规则
{ path: '/register', component: Register, children:[
{ path: '/register/tab1', component: tab1},
{ path: '/register/tab2', component: tab2}
]}
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
</script>
当我们需要设置多个路由链接时,可以使用动态路由的方式。
通过动态路由参数的模式进行路由匹配:
<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>
<script>
const User = {
// 在路由组件中,可以通过$route.params获取路由参数
template: ' User 组件——{{$route.params.id}}
'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
// 动态路由参数由:开头
{ path: '/user/:id', component: User }
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
</script>
上面使用了$route.params
来获取路由参数,但是$route
与对应路由形成高度耦合,所以我们可以使用props将组件与路由进行解耦。
const User = {
props:['id'], //使用props接收路由参数
template: ' User 组件——{{ id }}
'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
//如果props被设置为true, route.params将会被设置为组件属性
{ path: '/user/:id', component: User ,props: true},
]
})
const User = {
props:['uname','age'], //使用props接收路由参数
template: ' User 组件——{{ uname }}——{{ age }}
'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
//如果props被设置为对象,组件中就只能访问这个对象,不能再访问id,且每个组件访问的都是这个对象
{ path: '/user/:id', component: User ,props: {uname:'zhangsan', age:18}}
]
})
const User = {
props:['id','uname','age'],
template: ' User 组件——{{ id }}——{{ uname }}——{{ age }}
'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
//如果props被设置为函数,这个函数接收route对象为自己的形参
{ path: '/user/:id',
component: User,
props: route =>({uname:'zhangsan', age:18, id:route.params.id})
}
]
})
为了更加方便的表示路由的路径,我们可以给路由规则起一个别名,这就是命名路由。
可以使用命名路由实现页面的跳转:
<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>
// to使用:进行绑定,name表示跳转的路由名称,params表示携带的参数
<router-link :to="{name:'user', params:{id:4}">User4</router-link>
// 路由占位符
<router-view></router-view>
</div>
const router = new VueRouter({
routes: [
{ path: '/user/:id',
name:'user', //设置路由名称
component: User,
props: route =>({uname:'zhangsan', age:18, id:route.params.id})
}
]
})
页面导航的方式有两种:声明式导航和编程式导航
(1)声明式导航是指通过点击连接实现导航,例如在普通网页中的连接、vue中的
(2)编程式导航是指通过调用JavaScript的API来实现导航,例如普通网页中的location.href
、vue中this.$router.push ('hash地址')
和this.$router.go (n)
下面来看一下vue中的这两种编程式导航方式:
const User = {
// 点击跳转到注册页面
template: '' ,
methods: {
goRegister: function() {
//用编程的方式控制路由跳转
this.$router.push('/register');
}
}
}
const Register = {
// 点击后退到用户页面
template: '' ,
methods: {
goBack: function() {
//用编程的方式控制路由跳转
this.$router.go(-1);
}
}
}
router.push()
方法的参数:
(1)参数为字符串,表示路径名称
router.push('/home')
(2)参数为对象,表示path地址
router.push({path: '/home'})
(3)命名的路由,可以进行传参
router.push({name: '/user', params:{id:1}})
(4)带查询的参数,会转化为/register?uname=zhangsan
router.push({path: '/register', query:{uname:'zhangsan'}})