（学习笔记）vue-router

1.安装

npm install vue-router@3.6.5

 2.简单使用

1.创建router文件夹，创建index.js写入

import Vue from "vue";
import VueRouter from  'vue-router'
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
import Home from '../views/home.vue'
Vue.use(VueRouter)

// 2. 定义路由
const routes = [
  { path: 'home', component: Home,name:'home'},
]

// 3. 创建 router 实例，然后传 `routes` 配置

const router = new VueRouter({
  // mode: 'history',
    routes // (缩写) 相当于 routes: routes
  })
4.导出router
export default router

2.main.js挂载

import router from './router'

new Vue({
  render: h => h(App),
  router,
  store,
}).$mount('#app')

3.App.vue下定义路由出口

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

3.声明式导航传参

注意：参数都在$route上

 //路由写法
 routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]

//组件获取值
 {{ $route.params.id }}

4.编程式导航传参**

注意：参数都在$route上

router-link等同于this.$router.push()

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

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

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

router.go(n)这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

5.嵌套路由**

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

对于这样的层级关系。Profile和Posts相当于User的子组件，使用vue-router根据路由渲染他们。

第一步在路由里面定义他们

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

第二步：在想渲染的位置写下router-view站位

<div id="app">
  <router-view></router-view>
</div>

6.重定向**

const routes = [
    {
        path:'/',
        redirect:'/login'
    }
]

7.导航守卫

三个参数(to, from, next)  to要去向那个url，from从哪个url来，next()允许通过还是不通过并指定一个去向。一定要有一个next()执行。

{ path: 'userInfo', component: ()=>import('@/views/userInfo.vue'),name:'userInfo'  ,meta:{requireAuth: true,}},
//全局前置守卫，如果要去的页面是必须登录才能访问的就验证是否有token，没有就返回登录页
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem("token")
  if(to.meta.requireAuth){
      if (token) {
        next();
    } else {
        next('/login');
    }
  }
  else next()
})

8.路由懒加载

component: ()=>import('@/views/userGroup.vue')

9.history模式

使用 history 模式时，URL 就像正常的 url，没有路由中的*，但是需要服务器端进行配合。

参考链接：Vue Router