vue-router

最新推荐文章于 2024-09-24 10:50:41 发布

weixin_34087503

最新推荐文章于 2024-09-24 10:50:41 发布

阅读量47

点赞数

文章标签： javascript webpack ViewUI

原文链接：https://juejin.im/post/5cd91231e51d456e89634ae0

版权

入门

路由的工作
准备工作
1. 安装 npm i vue-router
1. 引入 import VueRouter from 'vue-router'
1. 注意点 : vue-router 和 vuex 在模块化(把他们单独提到一个js文件里)工程中,需要使用 Vue.use(安装一下)
1. 实例化 + 挂载 (导出去再挂载)
四个步骤
1,先把需要的组件创建出来 Login.vue Home.vue
走流程
```
1. 入口 (url测试)
复制代码
```
```
2. 匹配规则
复制代码
```
```
3. 组件
复制代码
```
```
4. 出口
复制代码
```

注意点 : 模块化工程中, 记得使用 vue 安装一下路由功能

import Vue from 'vue'
//引入路由
// const VueRouter = require('vue-router')
import VueRouter from 'vue-router'

// 引入组件
import Login from '../components/login/Login.vue'
// 分割的方法 :   const Foo = () => import('./Foo.vue')   异步组件 + webpack => 分割不同的模块
const Home = () => import('../components/home/Home.vue')
const Users = () => import('../components/users/Users.vue')

// import Home from '../components/home/Home.vue'
// import Users from '../components/users/Users.vue'

// 安装一下
Vue.use(VueRouter)

// 实例化
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    {
      path: '/home',
      component: Home,
      children: [
        { path: '/users/:page?', component: Users },
        { path: '/roles', component: Roles }
      ]
    }
  ]
})

// 导航 守卫
router.beforeEach((to, from, next) => {
  // 判断访问的是不是登录页面
  if (to.path === '/login') {
    next()
  } else {
    // 其他页面
    // 判断有没有登录过
    let token = localStorage.getItem('token')
    // 判断token有没有值
    token ? next() : next('/login')
  }
})

// 导出 路由
export default router
复制代码