一些基础配置非初始化配置 2022年2月7日以后，vue-router的默认版本，为4版本，而且 vue-router4

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

非初始化配置

npm install vue-router --save //报错

2022年2月7日以后，vue-router的默认版本，为4版本，而且 vue-router4,只能在vue3中，只有vue-router3，能用在vue 2中

如果把vue-router4强制安装到vue2中，则会报上面的错误

npm i vue-router@3//正确

检查是否安装成功？

1.npm ls 查看

2.package.json 中查看依赖 -》版本

报错

配置路由后删除helloworld组件 npm run serve 报错

解决？将homeview里导入和用到的helloworld删除

分析src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入路由组件（方式一）
import HomeView from '../views/HomeView.vue'
//导入路由组件（方式二）-> 懒加载 -> 推荐
const AboutView = () => import('../views/AboutView.vue')
//使用插件
Vue.use(VueRouter)
//配置映射关系
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  }
]
//new一个对象并在vue中注册
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
//base代表应用的基路径，process.env.BASE_URL是指从从环境进程中根据运行环境获取的api的base_url
  routes
  //routes:routes
})
//暴露
export default router

routes其他属性

router属性

mode

mode: 'hash',//hash模式下，浏览器地址不规整,带有# -》丑
mode: 'history',//history模式下，浏览器地址规整，但需要后台支持

name

用法1：通过name属性，为一个页面中不同的router-view渲染不同的组件,如下代码所示：
<template>
  <div id="app">
     <router-view></router-view>
     <router-view  name="Hello"></router-view> //将渲染Hello组件
     <router-view  name="text"></router-view>   //将渲染text组件
  </div>
</template>
用法2：可以用name传参 使用$router.name获取组件name值
 <template>
  <div id="app">
    <p>{{ $route.name }}</p> //可以获取到渲染进来的组件的name值
    <router-view></router-view>
  </div>
</template>
用法3：用于pramas传参的引入 pramas必须用name来引入 query可以用name或者path来引入
   var router = new VueRouter({
      routes: [
        { name:'register', path: '/register/:id/:name', component: register }
      ]
    })
   <router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link>
补充：
用法4：在路由出口外围加keep-alive 后 其中某个路由不需要缓存数据 要求点击刷新

active-class

router-link-exact-active

router-link-exact-active 是精确匹配规则，即只有当前点击router被匹配

router-link-active

router-link-active 默认是全包含匹配规则，即path名全包含在当前router path名开头的router也会被匹配到

一些基础配置