vue-router的基本使用

概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系
前端路由负责事件监听，触发事件后，通过事件函数渲染不同内容。

使用步骤：
第一：引入相关的库文件
a: 导入vue 文件，为全局window对象挂载vue构造函数
b：导入 vue-router 文件，为全局window对象挂载vueRouter构造函数

第二：添加路由链接
a: router-link 是vue 中提供的标签，默认会被渲染为a标签
b：to 属性会被渲染为 href 属性
c：to 属性的值会被默认渲染为 # 开头的 hash 地址
< router-link to=" /user">User</ router-link>
< router-link to=" /register">Register</ router-link>

第三： 添加路由填充位
a: 路由填充位（也叫做路由占位符)
b: 将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置
< router-view>< /router-view>

第四： 定义路由组件
var user = {
template: ‘< div>User</ div>’
}
var Register = {
template: ‘< div>Register</ div>’
}

第五：配置路由规则并创建路由实例
a: 创建路由实例对象
var router = new vueRouter ( {
//routes是路由规则数组
routes: [
//每个路由规则都是一个配置对象，其中至少包含path和component 两个属性:
// path表示当前路由规则匹配的 hash 地址
// component表示当前路由规则对应要展示的组件
{path : ’ / user ’ , component: User},
{path: ’ / register ’ ,component: Register}]
})

第六：把路由挂载到Vue根实例中
new vue ( {
el: ’ #app ',
router
//为了能够让路由规则生效，必须把路由对象挂载到vue实例对象上 }）

二：路由重定向
路由重定向指的是:用户在访问地址A的时候，强制用户跳转到地址c，从而展示特定的组件页面;
通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向;
var router = new vueRouter ( {
routes: [
//其中,path表示需要被重定向的原地址，redirect表示将要被重定向到的新地址
{ path: ’ / ‘, redirect : ‘/user’ },
{path : ’ / user’ ,component: User},
{path: ’ / register ’ ,component: Register} ]
} )

三: vue-router嵌套路由
a: 嵌套路由用法
1.嵌套路由功能分析
点击父级路由链接显示模板内容·
模板内容中又有子级路由链接
点击子级路由链接显示子级模板内容

2.父路由组件模板
父级路由链接
父组件路由填充位
< p>
< router-link to="/user">User</ router-link>
< router-link to=" /register">Register</ router-link></ p>
< div>

< router-view></ router-view>
</ div>

3.子级路由模板
子级路由链接
子级路由填充位
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>’

四：vue-router动态路由匹配
动态匹配路由的基本用法
应用场景:通过动态路由参数的模式进行路由匹配
var router = new vueRouter ( {
routes: [
//动态路径参数以冒号开头
{ path : ‘/user/ :id’, component : User }
]
} )
const User = {
//路由组件中通过 $route.params 获取路由参数
template: ‘< div>User { { $route.params.id } }</ div>’ }

4.2路由组件传递参数
$route 与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦
1.props的值为布尔类型
const router = new vueRouter ( {
routes: [
//如果props 被设置为true，route.params 将会被设置为组件属性
{ path: ‘/user/ :id’,component: user, props: true }]
})
const user = {
props: [ ‘id’], // 使用props 接收路由参数
template: ‘< div>用户ID: {{ id } }</ div>’ // 使用路由参数

4.3 props的值为对象类型
const router = new vueRouter ( {
routes: [
//如果props是一个对象，它会被按原样设置为组件属性
{ path: ‘/user/: id’，component: User，props: { uname : ‘lisi’，age: 12 }}]
})
const User = {
props: [ 'uname ’ , ‘age,’ ],
template: ‘< div>用户信息:{ { uname + ‘—’ + age} }</ div>’ }
4.4 .props 的值是函数类型
如果props 是一个函数，则这个函数接收route对象为自己的形参

4.5 命名路由的配置规则
为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。
const router = new vueRouter ( {
routes: [
{
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 }})

五：编程式导航基本用法
常用的编程式导航API如下:
this.$ router.push ( 'hash地址·)
this.$ router.go (n)
const User = {
template: ‘< div>< button eclick=“goRegister”>跳转到注册页面</ button></ div>’
methods: {
goRegister: function ( ) {
//用编程的方式控制路由跳转
this.$router.push ( ’ /register ’ );
}
}
}