vue-router的使用

路由配置

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import Login from "../components/Login.vue"
import Home from "../components/Home.vue"
import Wellcome from "../components/Wellcome.vue"
import User from "../components/User.vue"


Vue.use(VueRouter)

const routes = [
  {
    path: "/",
    redirect: "/login"
  },
  {
    path: "/login",
    component: Login
  },
  {
    path: "/home",
    component: Home,
    redirect: "/wellcome",
    children: [
      { path: "/wellcome", component: Wellcome },
      { path: "/users", component: User },
      { path: "/roles", component: User },

    ]
  }
]

const router = new VueRouter({
  routes
})


router.beforeEach((to, from, next) => {
  if (to.path === "/login") return next()
  const token = sessionStorage.getItem("Token")
  if (!token) return next("/login")
  next()
})

export default router

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

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

路由跳转

一.router-link>: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个a>标签.
router-view>: 该标签会根据当前的路径, 动态渲染出不同的组件.

二 . 代码跳转

路由懒加载

const Home = () => import('../components/Home.vue')

嵌套路由

{
    path: "/home",
    component: Home,
    redirect: "/wellcome",
    children: [
    // 加/和不加访问路径是有区别的，加了之后router-view放在home组件下，访问是/wellcome,不加访问是/home/users
      { path: "/wellcome", component: Wellcome },
      { path: "users", component: User },
      // {path: "", redirect: "/wellcome"}
    ]
  }

<router-link to="/welcome">
<router-link to="/home/users">

传递参数的方式

传递参数主要有两种类型: params和query

一.params的类型:
配置路由格式: /router/:id(动态路由)
传递的方式: 在path后面跟上对应的值
传递后形成的路径: /router/123, /router/abc

二.query的类型:
配置路由格式: /router, 也就是普通配置
传递的方式: 对象中使用query的key作为传递方式
传递后形成的路径: /router?id=123, /router?id=abc

如何使用它们呢? 也有两种方式: router-link>的方式和JavaScript代码方式

$ route和$router的区别

1、$ router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
2、获取参数通过 $ route对象获取的，$route为当前router跳转对象里面可以获取name、path、query、params等

keep-alive

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
它们有两个非常重要的属性:
include - 字符串或正则表达，只有匹配的组件会被缓存
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：