VUE-Router笔记，路由跳转、路由守卫、404页面配置等等。

官方文档：https://router.vuejs.org/zh

路由跳转

1. router-link标签。设置router-link的样式，参考这篇博客。

   • 会转换为a标签。目的路由写在router-link标签的to属性中。

     1 2 3

     <router-link to="/order/more"> <el-button type="primary">更多</el-button> </router-link>

2. js代码实现路由跳转可以使用this.$router.push(“路径”);。（更多跳转方式，参考这篇博客）。

   1 2	// window.location.href="/#/home"; this.$router.push("/home");

传递参数

分为params、query。

• params，指定目标页面使用路由name，参数会拼接在地址栏，刷新页面不会丢失
• query，指定目标页面使用路由url，参数不会拼接在地址栏，刷新页面会丢失

1
2
3
4
5
6
7

this.$router.push({
	name: name,//路由定义中的name
	params: {
        id: '15324',
        age: 18
    }//传递参数（会拼接在url后边）
})

配置404页面

配置404页面（vue2.x)。

在文件router/index.js中的routes数组最后进行如下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

...
import notfound from '../components/page/notfound.vue'

Vue.use(Router)
//routes数组，配置router路由与页面的映射关系。
const router = new Router({
  routes: [{
      。。。
  }]
});

//404配置如下：（添加在routes数组的最后）

  //添加一个404页面，路由为/404，页面为notfound，路由名为404
  {
    path: '/404',
    name: '404',
    component: notfound
  },
  //使用通配符配置404页面，redirect重定向到路由名为404的页面。'*'匹配所有，前边没有匹配到的路由，将会显示404页面
  {
    path: '*',
    redirect: {
      name: '404'
    }
  }

路由守卫

路由守卫控制访问权限。

案例：

如果用户没有登录（通过token来判断），而是直接通过URL访问特定页面,需要重新导航到登录页面。

未添加路由守卫前的router/index.js文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/login.vue'
import order from '@/components/order_manageMenu'
import addMaterial from '@/components/addMaterial'

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      redirect: '/login'
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/order',
      name: 'order',
      component: order,
      meta: {
        title: '订单管理'
      }
    }, {
      path: '/addMaterial',
      name: 'addMaterial',
      component: addMaterial,
      meta: {
        title: '新增物料'
      }
    }
  ]
})

把export default new Router拆分开来，配置好路由守卫后再export。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

const router = new Router({
  routes: [{
      path: '/',
      redirect: '/login'
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/order',
      name: 'order',
      component: order,
      meta: {
        title: '订单管理'
      }
    }, {
      path: '/addMaterial',
      name: 'addMaterial',
      component: addMaterial,
      meta: {
        title: '新增物料'
      }
    }
  ]
})

//对router进行配置

export default router;

添加的配置如下：

1
2
3
4
5
6
7
8
9
10
11
12

//挂载路由导航守卫。to表示将要访问的路径；from表示从哪里来；next是下一个要做的操作（一个函数），next() 放行，next('/login')强制跳转到"/login"
//为路由对象,添加beforeEach导航守卫
router.beforeEach((to, from, next) => {
  // 访问登录页，放行
  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  // 没有token, 强制跳转到登录页
  if (!tokenStr) return next('/login')
  //token存在则放行
  next()
})