【Vue】vue-router 路由基础
目录
- 1. 路由的基本概念
- 2. vue-router 简介
- 3. vue-router 基本使用
- 4. 路由重定向
- 5. 嵌套路由
- 6. 动态路由匹配
- 7. 命名路由
- 8. 编程式导航
1. 路由的基本概念
路由分为两种：后端路由 和 前端路由
（1）后端路由是指根据不同用户的URL请求，返回不同的内容。它的本质就是URL请求地址与服务器资源之间的对应关系。
（2）前端路由是指根据不同的用户事件，显示出不同的页面。它的本质是用户事件和事件处理函数之间的对应关系。
2. vue-router 简介
vue-router是Vue.js官方的路由管理器，它包含的功能有：
- 支持HTML5历史模式或hash模式
- 支持嵌套路由
- 支持路田参数
- 支持编程式路由
- 支持命名路由
- 支持导航守卫
- 支持过渡动效
- 支持路由懒加载
3. vue-router 基本使用
vue-router的基本使用步骤：
- 引入相关的库文件
- 添加路由链接
router-link是vue中提供的标签，默认会被渲染为a标签to属性默认会被渲染为href属性to属性的值默认会被渲染为#开头的hash地址
- 添加路由填充位
- 路由填充位也叫做路由占位符，将来通过路由规则匹配到的组件，将会被渲染到
router-view所在的位置
-
定义路由组件
-
配置路由规则并创建路由实例
routes是路由规则数组- 每个路由规则都是一个配置对象，其中至少包含
path和component两个属性: path表示当前路由规则匹配的hash地址component表示当前路由规则对应要展示的组件
- 把路由挂载到Vue根实例中
例如：
<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>
4. 路由重定向
路由重定向是指：用户在访问A页面时，强制用户跳转到地址B，从而展示特定的组建页面。
通过路由规则的redirect属性，指定一个新的路由地址就可以设置路由的重定向。
const router = new VueRouter({
// 所有的路由规则
routes: [
// path表示需要被重定向的原地址，redirect表示将要被重新定向的新地址。
{ path: '/', redirect：'/user' },
{ path: '/user', component: User },
{ path: '/register', component: Register }
]
})
5. 嵌套路由
<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>
6. 动态路由匹配
当我们需要设置多个路由链接时，可以使用动态路由的方式。
通过动态路由参数的模式进行路由匹配：
<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将组件与路由进行解耦。
- 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},
]
})
- props的值可以为对象类型
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}}
]
})
- props的值可以为函数类型
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})
}
]
})
7. 命名路由
为了更加方便的表示路由的路径，我们可以给路由规则起一个别名，这就是命名路由。
可以使用命名路由实现页面的跳转：
<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})
}
]
})
8. 编程式导航
页面导航的方式有两种：声明式导航和编程式导航
（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'}})