vue-router基础内容

vue-router基础内容

vue-router是vue官方指定的路由库,让我们来撸一遍vue-router的基本概念吧!

安装

我是以直接下载的方式来引入vue-router的。

1
<script src="./lib/vue-router.js"></script>

使用vue-router

定义路由

1
2
3
4
5
6
7
8
const routes = [
// 这里定义一个最基础的路由
{ path: '/b', component: ComponentB }
// 动态路由
{ path: '/user/:id', component: User }
// 命名路由
{ path: '/user/:id', name: user, component: User }
];

创建 router 实例

1
2
3
const router = new VueRouter({
routes // (缩写)相当于 routes: routes
})

vue实例注入路由

通过 router 配置参数注入路由。

1
2
3
4
5
var app = new Vue({
el: '#app',
router: router,
......
})

通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由。

使用路由出口

1
2
3
<!-- 路由出口,与angular的router-outlet类似 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

路由跳转

通过router-link组件,我们可以进行路由的跳转。to属性的写法很多,请参考router-link

1
2
<router-link to="/b">Component B</router-link>
<router-link :to="{ path: '/c' }">Component C</router-link>

编程式路由

router.push(location, onComplete?, onAbort?)

该方法的参数location可以是一个字符串路径,或者一个描述地址的对象。用法如下:

1
2
3
4
router.push('b');
router.push({path: 'b'})
router.push({path: 'user/1'})
router.push({name: 'user', params: {id: 1}})

router.replace(location, onComplete?, onAbort?)

跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。

1
router.replace(...)

ps:你也可以在router-link使用replace。

1
<router-link :to="..." replace>

router.go(n)

类似 window.history.go(n)。是history回退和前进的操作。

了解了上述几个点后,你基本上可以完成基本的路由功能了。

嵌套路由

一个组件内部也可以有路由视图router-view。

1
2
3
4
<div>
<p>FatherComponent Content</p>
<router-view></router-view>
</div>

于此同时需要在路由定义处添加children属性。也是类似嵌套的写法。

1
2
3
4
5
6
7
{
path: '/father',
component: FatherComponent,
children: [
{ path: 'child', component: ChildComponent }
]
}

命名视图

当我们的布局是由几部分组成时,并且我们希望每一部分都有自己的路由,那么此时就不是嵌套路由了,而是多路由视图,这个时候我们就需要用到命名视图了。

1
2
3
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

而在定义路由的时候也要对应好。

1
2
3
4
5
6
7
8
9
10
11
12
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})

用watch监测路由

很多时候我们可能需要监测路由变化,那么需要在watch中监测’$route’,方法大体是’$route’ (to, from) {your code}

1
2
3
4
5
6
7
8
watch: {
'$route': function (to, from) {
this.fromRoute = from.path;
this.toRoute = to.path;
// 可以根据情况做一些后续的逻辑处理
......
}
}

路由重定向

重定向的意思就是本来是要跳路由A的,但是定向到B。写法如下:

1
2
3
4
5
6
7
8
9
10
11
12
routes: [
{ path: '/b', component: ComponentB },
// redirect为path的形式
{ path: '/a', redirect: '/b' },
// redirect为name的形式
{ path: '/a', redirect: { name: 'compB'} },
// 甚至是一个方法,动态返回重定向目标,这样我感觉都可以做路由守卫了。
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]

路由别名

1
2
3
routes: [
{ path: '/a', component: A, alias: '/b' }
]

alias的意思是别名,通俗讲,你大名是张三,别人叫你阿三,你也答应了,阿三就是你的别名。反映到路由上就是说,b是a的别名,那我输入路由b,地址栏会显示b,但也会映射到A组件;如果输入a,那地址栏就还是a,组件也是A,没什么变化。

向路由组件传递props

在组件中使用 $route 会使之与其对应路由形成高度耦合,我们可以使用props的形式来重新定义。这样id就会作为一个prop属性,用来接收传递的数据。

1
2
3
4
5
6
7
8
9
// 路由定义
routes: [
{ name:'employee', path: '/employee/:id', component: Employee, props: true}
]
// 组件定义
const Employee = Vue.component('Employee', {
props: ['id'],
template: '<p>I am worker {{id}}</p>'
});

路由守卫

通过跳转或取消的方式守卫路由。

全局守卫

使用router.beforeEach注册全局的路由守卫:

1
2
3
4
5
6
7
8
9
router.beforeEach(function(to, from, next) {
console.log('GLOBAL_beforeEach');
if (to.path === '/my') {
next(false);
alert('You are not registered...');
} else {
next();
}
});

next:一定要调用该方法来 resolve 这个钩子

  • next(): 进行管道中的下一个钩子。
  • next(false): 中断当前的导航。
  • next(‘/‘) 或者 next({ path: ‘/‘ }): 跳转到一个不同的地址。也可以传params的。

路由独享的守卫

利用beforeEnter钩子实现。

1
2
3
4
5
6
7
8
9
10
11
const routes = [
{
name:'user',
path: '/user/:id',
component: User,
beforeEnter: function (to, from, next) {
console.log('ROUTE_beforeEnter');
next(false);
}
}
]

组件内的守卫

可以利用beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave几个钩子来定义守卫。

  • beforeRouteEnter用于拦截进入组件的情形。
  • beforeRouteUpdate用于当前路由改变,但是该组件被复用的情况,如/user/1 和 /user/2 之间跳转的时候。
  • beforeRouteLeave用于拦截离开组件的情形。

路由transition

router-view是基本的动态组件,所以我们可以用 transition组件给它添加一些过渡效果。

1
2
3
<transition name="slide">
<router-view></router-view>
</transition>

路由切换时记住滚动的位置

创建 Router 实例时,指定scrollBehavior属性。

1
2
3
4
5
6
7
8
9
10
11
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// 第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的前进/后退 按钮触发) 时才可用。
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
})

更多功能实现请参考vue-router文档


扫一扫下方小程序码或搜索Tusi博客,即刻阅读最新文章!

Tusi博客

You forgot to set the qrcode for Alipay. Please set it in _config.yml.
You forgot to set the qrcode for Wechat. Please set it in _config.yml.
You forgot to set the business and currency_code for Paypal. Please set it in _config.yml.
You forgot to set the url Patreon. Please set it in _config.yml.
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×