1.路由基本概念和原理
（1）路由
本质：对应关系
- 后端路由：根据不同用户URL请求，返回不同内容
本质：URL请求地址与服务器资源之间的对应关系
- 前端路由：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系
（2）实现简易前端路由
基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）
（3）Vue Router
https://router.vuejs.org/zh/
功能：
- 支持HTML5历史模式或hash模式
- 支持嵌套路由
- 支持路由参数
- 支持编程式路由
- 支持命名路由
2.vue-router的基本使用
（1）基本使用步骤
- 引入相关的库文件
<script src = "./lib/vue-2.5.22.js"></script>
<script src = "./lib/vue-router-3.0.2.js"><script>
- 添加路由连接
<router-link to = "/user">User</router-link>
<router-link to = "/register">Resgister</router-link>
- 添加路由填充位
<router-view></router-view>
- 定义路由组件
var User = {
template: '<div>User</div>'
}
var Register = {
template: '<div>Register</div>'
}
- 配置路由规则并创建路由实例
var router = new VueRouter({
router: [
{path: '/user', component:User},
{path: '/register', component:Register}
] //path表示当前路由规则匹配的hash地址，component表示当前路由规则对应要展示的组件
})
- 把路由挂载到vue根实例中
new Vue({
el: '#app',
router //为了能够让路由规则生效，必须把路由有对象挂载到vue实例对象上
})
（2）路由重定向
用户在访问地址A时，强制用户跳转到地址C，从而展示特定组件页面
通过路由规则的redirect属性，指定一个新的路由地址
{path:'/', redirect:'/user'}
3.vue-router嵌套路由
（1）用法
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>'
}
const router = new VueRouter({
router: [
{path:'/user', component:User},
{
path: '/register',
component: Register,
children: [
{path:'/register/tab1', component:Tab1},
{path:'/register/tab2', component:Tab2}
]
}
]
})
4.动态路由
（1）用法
var router = new VueRouter({
router: [
{path:'/user/:id', component: user}
] //动态路径参数以冒号开头
})
const User = {
template: '<div>User{{$router.oarams.id}}</div>'
} //路由组件中通过$router.params获取路由参数
（2）路由组件传参
- props的值为布尔类型
const router = new VueRouter({
router: [
{path:'/user/:id', component:user, props:true}
]
})
const User = {
props:['id'],
template:'<div>用户ID：{{id}}</div>'
}
- props的值为对象类型
const router = new VueRouter({
router:[
{path:'/user/:id', component:User, props:{uname:'off', age:30}}
]
})
const User = {
props:['uname', 'age'],
template:'<div>用户信息:{{uname + '---' +age}}</div>'
}
- props的值为函数类型
const router = new VueRouter({
router: [
{path: '/user/:id',
component: User,
props: route => ({uname:'tay', age: 30, id:route,params:id})}
]
})
const User = {
props:['uname', 'age', 'id'],
template:'<div>用户信息：{{uname + '---' + age + '---' + id}}</div>'
}
5.Vue-router命名路由
给路由规则起一个别名
const router = new VueRouter({
router: [
{
path: '/user/:id'
name: 'user',
component: User
}
]
})
<router-link :to = ''{name:'user', params: {id: 123}}">user</router-link>
router.push({name: 'user', params: {id:123}})
标签：前端,User,path,router,id,路由,user From： https://www.cnblogs.com/qqlzs/p/16874099.html