vueRouter
vue-router
vue-router是vue官方给出的一个基于vue的路由管理器。
首先我们可以看一下用window.onhashchange模拟一下路由
<body>
<div id="app">
<a href="#/one">1111111</a>
<a href="#/two">22222222</a>
<a href="#/three">33333333</a>
<!-- 展示对应的组件 -->
<component :is="com"></component>
</div>
<script>
const one = {
template: `one
`
}
const two = {
template: `tow
`
}
const three = {
template: `three
`
}
var vm = new Vue({
el: '#app',
data: {
com: two
},
components: {
one,
two,
three
}
})
window.onhashchange = function() {
if (location.hash.slice(1) == '/one') {
vm.com = one
} else if (location.hash.slice(1) == '/two') {
vm.com = two
} else {
vm.com = three
}
}
</script>
</body>
以上是基于vue用原生的window.onhashchange模拟的前端路由，虽然是能能实现，但是功能确实有限的
一下基于vue-router实现的路由
<div id="app">
<!-- router-link 默认会被渲染成 a标签 -->
<!-- to属性默认会被渲染成href属性 -->
<!-- to属性值默认会被渲染成 #hash值 -->
<router-link to='/user'>user</router-link>
<router-link to="/registor">registor</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script>
const user = {
template: `user
`
}
const registor = {
template: `registor
`
}
const router = new VueRouter({
routes: [{
path: '/user',
component: user
}, {
path: '/registor',
component: registor
}]
})
var vm = new Vue({
el: '#app',
router,
})
</script>
路由重定向
在路由匹配规则中通过redirect属性配置重定向的路由地址
{
path: '/foo',
redirect: '/bar'
}
路由嵌套
通过路由匹配规则的children属性来实现路由的嵌套
{
path: '/foo',
component: Foo,
children: [{
path: '/bar',
component: Foo
}]
}
** 动态路由匹配***
有些时候需要动态为组件传递路由参数，这时需要动态匹配参数的形式，提高代码的复用性
<router-link to='/user/1'>user1</router-link>
<router-link to='/user/2'>user2</router-link>
<router-link to='/user/3'>user3</router-link>
//通过动态路由匹配的方式来传递路由参数
const user ={
template:`user组件传递的路由参数----{
{$.route.params.id}}
`
const routes=[{
path:'user/:id',component:user}] //通过动态参数的方式来进行匹配
}
** props传参**
通过给匹配规则添加props：true来开启动态路由传参
const routes=[{path:'user/:id',component:user,props:true}]
const user={
props:['id'],
template:`user组件传递的路由参数----{
{id}}
`
}//直接通过父组件向子组件传参的方式来接收路由传递的参数
路由实例方法-导航守卫
可以使用router.beforeEach注册一个全局的路由导航守卫
const router=new VueRouter()
router.beforeEach((to,from,next)=>{
// to 即将进入路由目标对象
//form 当前导航目标对象
//next 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
//next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
if (to.name !== 'Login' && !isAuthenticated)
next({
name: 'Login' })
else next()
})
**
编程式导航
除了使用 < router-link > 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现
通过$.router.push()来实现编程式导航
const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
router,go(n)这个实例方法类似于原生的window.history.go(n) 意思是在 history 记录中向前或者后退多少步
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
router.replace()跟push方法一样，但不同的是这个是直接替换了，不会向push一样记录路由信息的