参考网站
https://www.cnblogs.com/czy960731/p/9288830.html
https://blog.csdn.net/qxb5215/article/details/80346820
https://www.jianshu.com/p/4ad2a6f7b6ff
vue-router学习
1.使用
-
npm install vue-router
-
import Vue from 'vue'
-
import VueRouter from 'vue-router'
-
Vue.use(VueRouter)
2.入口
-
<div id="app">
-
<h1>Hello App!</h1>
-
<p>
-
<!-- 使用 router-link 组件来导航. -->
-
<!-- 通过传入 `to` 属性指定链接. -->
-
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
-
<router-link to="/foo">Go to Foo</router-link>
-
<router-link to="/bar">Go to Bar</router-link>
-
</p>
-
<!-- 路由出口 -->
-
<!-- 路由匹配到的组件将渲染在这里 -->
-
<router-view></router-view>
-
</div>
3.JavaScript
-
// 0. 如果使用模块化机制编程, 要调用 Vue.use(VueRouter)
-
// 1. 定义(路由)组件。
-
// 可以从其他文件 import 进来
-
const Foo = { template: '<div>foo</div>' }
-
const Bar = { template: '<div>bar</div>' }
-
// 2. 定义路由
-
// 每个路由应该映射一个组件。 其中"component" 可以是
-
// 通过 Vue.extend() 创建的组件构造器,
-
// 或者,只是一个组件配置对象。
-
// 我们晚点在讨论嵌套路由。
-
const routes = [
-
{ path: '/foo', component: Foo },
-
{ path: '/bar', component: Bar }
-
]
-
// 3. 创建 router 实例,然后传 `routes` 配置
-
// 你还可以传别的配置参数, 不过先这么简单着吧。
-
const router = new VueRouter({
-
routes // (缩写)相当于 routes: routes
-
})
-
// 4. 创建和挂载根实例。
-
// 记得要通过 router 配置参数注入路由,
-
// 从而让整个应用都有路由功能
-
const app = new Vue({
-
router
-
}).$mount('#app')
-
// 现在,应用已经启动了!
动态路由监听
$route.params.
-
const User = {
-
template: '...',
-
watch: {
-
'$route' (to, from) {
-
// 对路由变化作出响应...
-
}
-
}
-
}
4.嵌套路由
通过children属性设置子路由
-
<div id="app">
-
<p>
-
<router-link to="/user/foo">/user/foo</router-link>
-
<router-link to="/user/foo/profile">/user/foo/profile</router-link>
-
<router-link to="/user/foo/posts">/user/foo/posts</router-link>
-
</p>
-
<router-view></router-view>
-
</div>
-
const User = {
-
template: `
-
<div class="user">
-
<h2>User {{ $route.params.id }}</h2> // 通过$router.param获取id
-
<router-view></router-view>
-
</div>
-
`
-
}
-
const UserHome = { template: '<div>Home</div>' }
-
const UserProfile = { template: '<div>Profile</div>' }
-
const UserPosts = { template: '<div>Posts</div>' }
-
const router = new VueRouter({
-
routes: [
-
{ path: '/user/:id', component: User, // 动态传参
-
children: [
-
// 这里设置子路由
-
// UserHome will be rendered inside User's <router-view>
-
// when /user/:id is matched
-
{ path: '', component: UserHome },
-
// UserProfile will be rendered inside User's <router-view>
-
// when /user/:id/profile is matched
-
{ path: 'profile', component: UserProfile },
-
// UserPosts will be rendered inside User's <router-view>
-
// when /user/:id/posts is matched
-
{ path: 'posts', component: UserPosts }
-
]
-
}
-
]
-
})
5.编程式的导航
Paste_Image.png
-
// 字符串
-
router.push('home')
-
// 对象
-
router.push({ path: 'home' })
-
// 命名的路由
-
router.push({ name: 'user', params: { userId: 123 }})
-
// 带查询参数,变成 /register?plan=private
-
router.push({ path: 'register', query: { plan: 'private' }})
router.replace(location)
跟 router.push
很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
router.go(n)
-
// 在浏览器记录中前进一步,等同于 history.forward()
-
router.go(1)
-
// 后退一步记录,等同于 history.back()
-
router.go(-1)
-
// 前进 3 步记录
-
router.go(3)
-
// 如果 history 记录不够用,那就默默地失败呗
-
router.go(-100)
-
router.go(100)
6.命名路由
-
import Vue from 'vue'
-
import VueRouter from 'vue-router'
-
Vue.use(VueRouter)
-
const Home = { template: '<div>This is Home</div>' }
-
const Foo = { template: '<div>This is Foo</div>' }
-
const Bar = { template: '<div>This is Bar {{ $route.params.id }}</div>' }
-
const router = new VueRouter({
-
mode: 'history',
-
base: __dirname,
-
routes: [
-
{ path: '/', name: 'home', component: Home },
-
{ path: '/foo', name: 'foo', component: Foo },
-
{ path: '/bar/:id', name: 'bar', component: Bar }
-
]
-
})
-
new Vue({
-
router,
-
template: `
-
<div id="app">
-
<h1>Named Routes</h1>
-
<p>Current route name: {{ $route.name }}</p>
-
<ul>
-
<li><router-link :to="{ name: 'home' }">home</router-link></li>
-
<li><router-link :to="{ name: 'foo' }">foo</router-link></li>
-
<li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li>
-
</ul>
-
<router-view class="view"></router-view>
-
</div>
-
`
-
}).$mount('#app')
7.命名视图
有时候想同时 (同级) 展示多个视图,而不是嵌套展示,如果 router-view
没有设置名字,那么默认为 default
。
如下情况
(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar
(侧导航) 和main
(主内容) 两个视图,这个时候命名视图就派上用场了
-
<script src="https://unpkg.com/vue/dist/vue.js"></script>
-
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
-
<div id="app">
-
<div id="app">
-
<h1>Named Views</h1>
-
<ul>
-
<li><router-link to="/">/</router-link></li>
-
<li><router-link to="/other">/other</router-link></li>
-
</ul>
-
<router-view class="view one"></router-view>
-
<router-view class="view two" name="a"></router-view> // 展示router里的components的a属性
-
<router-view class="view three" name="b"></router-view>
-
</div>
-
</div>
-
const Foo = { template: '<div>foo</div>' }
-
const Bar = { template: '<div>bar</div>' }
-
const Baz = { template: '<div>baz</div>' }
-
const router = new VueRouter({
-
mode: 'history',
-
routes: [
-
{ path: '/',
-
// a single route can define multiple named components
-
// which will be rendered into <router-view>s with corresponding names.
-
components: {
-
default: Foo,
-
a: Bar,
-
b: Baz
-
}
-
},
-
{
-
path: '/other',
-
components: {
-
default: Baz,
-
a: Bar,
-
b: Foo
-
}
-
}
-
]
-
})
-
new Vue({
-
router,
-
el: '#app'
-
})
Paste_Image.png
8.重定向 和 别名
-
重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b:
-
const router = new VueRouter({
-
routes: [
-
{ path: '/a', redirect: '/b' }
-
]
-
})
-
重定向的目标也可以是一个命名的路由:
-
const router = new VueRouter({
-
routes: [
-
{ path: '/a', redirect: { name: 'foo' }}
-
]
-
})
-
甚至是一个方法,动态返回重定向目标:
-
const router = new VueRouter({
-
routes: [
-
{ path: '/a', redirect: to => {
-
// 方法接收 目标路由 作为参数
-
// return 重定向的 字符串路径/路径对象
-
}}
-
]
-
})
-
import Vue from 'vue'
-
import VueRouter from 'vue-router'
-
Vue.use(VueRouter)
-
const Home = { template: '<div><h1>Home</h1><router-view></router-view></div>' }
-
const Foo = { template: '<div>foo</div>' }
-
const Bar = { template: '<div>bar</div>' }
-
const Baz = { template: '<div>baz</div>' }
-
const router = new VueRouter({
-
mode: 'history',
-
base: __dirname,
-
routes: [
-
{ path: '/home', component: Home,
-
children: [
-
// absolute alias
-
{ path: 'foo', component: Foo, alias: '/foo' },
-
// relative alias (alias to /home/bar-alias)
-
{ path: 'bar', component: Bar, alias: 'bar-alias' },
-
// multiple aliases
-
{ path: 'baz', component: Baz, alias: ['/baz', 'baz-alias'] }
-
]
-
}
-
]
-
})
-
new Vue({
-
router,
-
template: `
-
<div id="app">
-
<h1>Route Alias</h1>
-
<ul>
-
<li><router-link to="/foo">
-
/foo (renders /home/foo)
-
</router-link></li>
-
<li><router-link to="/home/bar-alias">
-
/home/bar-alias (renders /home/bar)
-
</router-link></li>
-
<li><router-link to="/baz">
-
/baz (renders /home/baz)</router-link>
-
</li>
-
<li><router-link to="/home/baz-alias">
-
/home/baz-alias (renders /home/baz)
-
</router-link></li>
-
</ul>
-
<router-view class="view"></router-view>
-
</div>
-
`
-
}).$mount('#app')
1.导航钩子
vue-router
提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的。
(1)全局钩子
-
const router = new VueRouter({ ... })
-
router.beforeEach((to, from, next) => {
-
// ...
-
})
每个钩子方法接收三个参数:
**to: Route
**: 即将要进入的目标 路由对象
**from: Route
**: 当前导航正要离开的路由
**next: Function
**: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next
方法的调用参数。
-
**next()
-
**: 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 **confirmed**
-
(确认的)。
-
**next(false)
-
**: 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),
-
那么 URL 地址会重置到 from 路由对应的地址。
-
**next('/')
-
或者 next({ path: '/' })
-
**: 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
(2)某个路由独享的钩子
你可以在路由配置上直接定义 beforeEnter 钩子:
-
const router = new VueRouter({
-
routes: [
-
{
-
path: '/foo',
-
component: Foo,
-
beforeEnter: (to, from, next) => {
-
// ...
-
}
-
}
-
]
-
})
(3)组件内的钩子
最后,你可以使用 beforeRouteEnter 和 beforeRouteLeave,在路由组件内直接定义路由导航钩子,
-
const Foo = {
-
template: `...`,
-
beforeRouteEnter (to, from, next) => {
-
// 在渲染该组件的对应路由被 confirm 前调用
-
// 不!能!获取组件实例 `this`
-
// 因为当钩子执行前,组件实例还没被创建
-
},
-
beforeRouteLeave (to, from, next) => {
-
// 导航离开该组件的对应路由时调用
-
// 可以访问组件实例 `this`
-
}
-
}
beforeRouteEnter 钩子 不能 访问 this,因为钩子在导航确认前被调用,因此即将登场的新组件还没被创建。
不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
-
beforeRouteEnter (to, from, next) => {
-
next(vm => {
-
// 通过 `vm` 访问组件实例
-
})
-
}
可以 在 beforeRouteLeave 中直接访问 this。这个 leave 钩子通常用来禁止用户在还未保存修改前突然离开。可以通过 next(false) 来取消导航。
2.路由元信息
定义路由的时候可以配置 meta 字段:
-
const router = new VueRouter({
-
routes: [
-
{
-
path: '/foo',
-
component: Foo,
-
children: [
-
{
-
path: 'bar',
-
component: Bar,
-
// a meta field
-
meta: { requiresAuth: true }
-
}
-
]
-
}
-
]
-
})
下面例子展示在全局导航钩子中检查 meta 字段:
-
router.beforeEach((to, from, next) => {
-
if (to.matched.some(record => record.meta.requiresAuth)) {
-
// this route requires auth, check if logged in
-
// if not, redirect to login page.
-
if (!auth.loggedIn()) {
-
next({
-
path: '/login',
-
query: { redirect: to.fullPath }
-
})
-
} else {
-
next()
-
}
-
} else {
-
next() // 确保一定要调用 next()
-
}
-
})
3.滚动特效
<router-view> 是基本的动态组件,所以我们可以用 <transition>
组件给它添加一些过渡效果:
-
<transition>
-
<router-view></router-view>
-
</transition>
单个路由的过渡
-
const Foo = {
-
template: `
-
<transition name="slide">
-
<div class="foo">...</div>
-
</transition>
-
`
-
}
-
const Bar = {
-
template: `
-
<transition name="fade">
-
<div class="bar">...</div>
-
</transition>
-
`
-
}
动态路由
-
import Vue from 'vue'
-
import VueRouter from 'vue-router'
-
Vue.use(VueRouter)
-
const Home = {
-
template: `
-
<div class="home">
-
<h2>Home</h2>
-
<p>hello</p>
-
</div>
-
`
-
}
-
const Parent = {
-
data () {
-
return {
-
transitionName: 'slide-left'
-
}
-
},
-
// dynamically set transition based on route change
-
watch: {
-
'$route' (to, from) {
-
const toDepth = to.path.split('/').length
-
const fromDepth = from.path.split('/').length
-
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
-
}
-
},
-
template: `
-
<div class="parent">
-
<h2>Parent</h2>
-
<transition :name="transitionName">
-
<router-view class="child-view"></router-view>
-
</transition>
-
</div>
-
`
-
}
-
const Default = { template: '<div class="default">default</div>' }
-
const Foo = { template: '<div class="foo">foo</div>' }
-
const Bar = { template: '<div class="bar">bar</div>' }
-
const router = new VueRouter({
-
mode: 'history',
-
base: __dirname,
-
routes: [
-
{ path: '/', component: Home },
-
{ path: '/parent', component: Parent,
-
children: [
-
{ path: '', component: Default },
-
{ path: 'foo', component: Foo },
-
{ path: 'bar', component: Bar }
-
]
-
}
-
]
-
})
-
new Vue({
-
router,
-
template: `
-
<div id="app">
-
<h1>Transitions</h1>
-
<ul>
-
<li><router-link to="/">/</router-link></li>
-
<li><router-link to="/parent">/parent</router-link></li>
-
<li><router-link to="/parent/foo">/parent/foo</router-link></li>
-
<li><router-link to="/parent/bar">/parent/bar</router-link></li>
-
</ul>
-
<transition name="fade" mode="out-in">
-
<router-view class="view"></router-view>
-
</transition>
-
</div>
-
`
-
}).$mount('#app')
4.导航完成后获取数据
假设我们有一个 Post 组件,需要基于 $route.params.id 获取文章数据:
导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。
导航完成之前获取:导航完成前,在路由的 enter
钩子中获取数据,在数据获取成功后执行导航。
-
<template>
-
<div class="post">
-
<div class="loading" v-if="loading">
-
Loading...
-
</div>
-
<div v-if="error" class="error">
-
{{ error }}
-
</div>
-
<div v-if="post" class="content">
-
<h2>{{ post.title }}</h2>
-
<p>{{ post.body }}</p>
-
</div>
-
</div>
-
</template>
-
export default {
-
data () {
-
return {
-
loading: false,
-
post: null,
-
error: null
-
}
-
},
-
created () {
-
// 组件创建完后获取数据,
-
// 此时 data 已经被 observed 了
-
this.fetchData()
-
},
-
watch: {
-
// 如果路由有变化,会再次执行该方法
-
'$route': 'fetchData'
-
},
-
methods: {
-
fetchData () {
-
this.error = this.post = null
-
this.loading = true
-
// replace getPost with your data fetching util / API wrapper
-
getPost(this.$route.params.id, (err, post) => {
-
this.loading = false
-
if (err) {
-
this.error = err.toString()
-
} else {
-
this.post = post
-
}
-
})
-
}
-
}
-
}
在导航完成前获取数据
-
export default {
-
data () {
-
return {
-
post: null,
-
error: null
-
}
-
},
-
beforeRouteEnter (to, from, next) {
-
getPost(to.params.id, (err, post) =>
-
if (err) {
-
// display some global error message
-
next(false)
-
} else {
-
next(vm => {
-
vm.post = post
-
})
-
}
-
})
-
},
-
// 路由改变前,组件就已经渲染完了
-
// 逻辑稍稍不同
-
watch: {
-
$route () {
-
this.post = null
-
getPost(this.$route.params.id, (err, post) => {
-
if (err) {
-
this.error = err.toString()
-
} else {
-
this.post = post
-
}
-
})
-
}
-
}
-
}
5.滚动行为
只有在mode:history模式下有用
-
import Vue from 'vue'
-
import VueRouter from 'vue-router'
-
Vue.use(VueRouter)
-
const Home = { template: '<div>home</div>' }
-
const Foo = { template: '<div>foo</div>' }
-
const Bar = {
-
template: `
-
<div>
-
bar
-
<div style="height:500px"></div>
-
<p id="anchor">Anchor</p>
-
</div>
-
`
-
}
-
// scrollBehavior:
-
// - only available in html5 history mode
-
// - defaults to no scroll behavior
-
// - return false to prevent scroll
-
const scrollBehavior = (to, from, savedPosition) => {
-
if (savedPosition) {
-
// savedPosition is only available for popstate navigations.
-
return savedPosition
-
} else {
-
const position = {}
-
// new navigation.
-
// scroll to anchor by returning the selector
-
if (to.hash) {
-
position.selector = to.hash
-
}
-
// check if any matched route config has meta that requires scrolling to top
-
if (to.matched.some(m => m.meta.scrollToTop)) {
-
// cords will be used if no selector is provided,
-
// or if the selector didn't match any element.
-
position.x = 0
-
position.y = 0
-
}
-
// if the returned position is falsy or an empty object,
-
// will retain current scroll position.
-
return position
-
}
-
}
-
const router = new VueRouter({
-
mode: 'history',
-
base: __dirname,
-
scrollBehavior,
-
routes: [
-
{ path: '/', component: Home, meta: { scrollToTop: true }},
-
{ path: '/foo', component: Foo },
-
{ path: '/bar', component: Bar, meta: { scrollToTop: true }}
-
]
-
})
-
new Vue({
-
router,
-
template: `
-
<div id="app">
-
<h1>Scroll Behavior</h1>
-
<ul>
-
<li><router-link to="/">/</router-link></li>
-
<li><router-link to="/foo">/foo</router-link></li>
-
<li><router-link to="/bar">/bar</router-link></li>
-
<li><router-link to="/bar#anchor">/bar#anchor</router-link></li>
-
</ul>
-
<router-view class="view"></router-view>
-
</div>
-
`
-
}).$mount('#app')
6.路由懒加载
结合 Vue 的 异步组件 和 Webpack 的 code splitting feature, 轻松实现路由组件的懒加载。
-
我们要做的就是把路由对应的组件定义成异步组件:
-
const Foo = resolve => {
-
// require.ensure 是 Webpack 的特殊语法,用来设置 code-split point
-
// (代码分块)
-
require.ensure(['./Foo.vue'], () => {
-
resolve(require('./Foo.vue'))
-
})
-
}
-
这里还有另一种代码分块的语法,使用 AMD 风格的 require,于是就更简单了:
-
const Foo = resolve => require(['./Foo.vue'], resolve)
-
不需要改变任何路由配置,跟之前一样使用 Foo:
-
const router = new VueRouter({
-
routes: [
-
{ path: '/foo', component: Foo }
-
]
-
})
把组件按组分块
-
const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
-
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
-
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')
另一种方法
const HelloWorld = ()=>import("@/components/HelloWorld")
作者:lmem
链接:https://www.jianshu.com/p/4ad2a6f7b6ff
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
问题集锦
1.vue2.0中的$router 和 $route的区别
最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地的Vue devtools结构了解了他们的区别
1.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。
举例:history对象
$router.push({path:'home'});本质是向history栈中添加一个路由,在我们看来是 切换路由,但本质是在添加一个history记录
方法:
$router.replace({path:'home'});//替换路由,没有历史记录
2.route是一个跳转的路由对象(单个对象),每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等
我们可以从vue devtools中看到每个路由对象的不同
这两个不同的结构可以看出两者的区别,他们的一些属性是不同的。
-
- $route.path
字符串,等于当前路由对象的路径,会被解析为绝对路径,如"/home/news"
。 - $route.params
对象,包含路由中的动态片段和全匹配片段的键值对 - $route.query
对象,包含路由中查询参数的键值对。例如,对于/home/news/detail/01?favorite=yes
,会得到$route.query.favorite == 'yes'
。 - $route.router
路由规则所属的路由器(以及其所属的组件)。 - $route.matched
数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。 - $route.name
当前路径的名字,如果没有使用具名路径,则名字为空。 - (meta属性是行业墨守成规的,$route对象上有啥属性,$route就可以访问到啥)
- $route.path
$route.path, $route.params, $route.name, $route.query
这几个属性很容易理解,看示例就能知道它们代表的含义
2Vue:hash模式 和 history模式区别
hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取;
特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。
hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。
history模式:history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。
history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”
3vue路由钩子
1.全局钩子
主要包括beforeEach和aftrEach,
beforeEach函数
有三个参数:
to:router即将进入的路由对象
from:当前导航即将离开的路由
next:Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航。
afterEach函数
不用传next()函数
这类钩子主要作用于全局,一般用来判断权限,以及以及页面丢失时候需要执行的操作,例如:
-
//使用钩子函数对路由进行权限跳转
-
router.beforeEach((to, from, next) => {
-
const role = localStorage.getItem('ms_username');
-
if(!role && to.path !== '/login'){
-
next('/login');
-
}else if(to.meta.permission){
-
// 如果是管理员权限则可进入,这里只是简单的模拟管理员权限而已
-
role === 'admin' ? next() : next('/403');
-
}else{
-
// 简单的判断IE10及以下不进入富文本编辑器,该组件不兼容
-
if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){
-
Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器,请使用更高版本的浏
-
览器查看', '浏览器不兼容通知', {
-
confirmButtonText: '确定'
-
});
-
}else{
-
next();
-
}
-
}
-
})
2.单个路由里面的钩子
主要用于写某个指定路由跳转时需要执行的逻辑
-
{
-
path: '/dashboard',
-
component: resolve => require(['../components/page/Dashboard.vue'], resolve),
-
meta: { title: '系统首页' },
-
beforeEnter: (to, from, next) => {
-
-
},
-
beforeLeave: (to, from, next) => {
-
-
}
-
-
},
3.组件路由
主要包括 beforeRouteEnter和beforeRouteUpdate ,beforeRouteLeave,这几个钩子都是写在组件里面也可以传三个参数(to,from,next),作用与前面类似.
beforeRouteEnter(to, from, next) {
next(vm => {
if (
vm.$route.meta.hasOwnProperty('auth_key') &&
vm.$route.meta.auth_key != ''
) {
if (!vm.hasPermission(vm.$route.meta.auth_key)) {
vm.$router.replace('/admin/noPermission')
}
}
})
},