如果使用vue-cli创建项目，没有选择路由插件，需要单独安装和配置

1.

在小黑窗输入下载命令npm i vue-router@3.5.3,根据版本号来下载

2.

创建路由文件router/index.js

index.js文件配置如下

// 导入路由插件
import VueRouter from 'vue-router'
import Vue from 'vue'

// 使用插件 - 重要
Vue.use(VueRouter)

// 导入组件

import Page1 from './Page1.vue'
import Page2 from './Page2.vue'
import Page3 from './Page3.vue'


// 创建路由规则
const router = new VueRouter({
  routes: [
    {
      path: "/page1", // 当浏览器访问 http://localhost:8080/#/page1时，
      component: Page1  // 装入组件 Page1
    },
    {
      path: "/page2",
      component: Page2
    },
    {
      path: "/page3",
      component: Page3
    }
  ]
})

export default router

3.ain导入路由

import router from './router/index.js'

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

路由出口

<router-view></router-view>

图示

总结

下载路由模块, 编写对应规则注入到vue实例上, 使用router-view挂载点显示切换的路由

Router-link

作用：用于提供路由链接，实现页面跳转

格式: <router-link to="/home">首页</router-link>

要点：

是vue-router提供的组件
router-link最终会渲染成a链接
router-link自带链接导航高亮的功能

示例

<template>
  <div>
    <h1>App组件</h1>
    <ul>
      <li><router-link to="/home">首页</router-link></li>
      <li><router-link to="/movie">电影</router-link></li>
      <li><router-link to="/about">关于</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

vue路由传参的方式

两种方式：

query（查询字符串）传参。适用场景：页面搜索
params传参。适用场景：详情页

this.$router.push("movie?a=1000&b=2000"); //query带参数跳转
this.$router.push("/news/100/阿翔呜呜/20"); //params带参数跳转

query传参图示

params传参图示

重定向

用户访问的是A地址，系统把它切换到B地址。

 {
      path: "/", // 当浏览器访问 http://localhost:3005/#/时，自动跳转到设置页
      redirect: '/movie'
    }

路由404

统一处理异常地址：那些个正常配置的地址之外的地址

{
      //统一处理异常地址：那些个正常配置的地址之外的地址。
      path: "*",
      component: page
    },

编程式导航

编程式导航 ====> 写代码的方式来让页面跳转

// 跳转页面不传参
this.$router.push('/路由路径')
this.$router.push({path: '路由路径'})
this.$router.push({name: '路由名称'})

// 跳转并query传参-方式1
this.$router.push("/路由路径?参数1=值1&参数2=值2")
// 跳转并query传参-方式2
this.$router.push({
    path: "路由路径",
    query: {
        "参数1":值1,
        "参数2":值2
    }
})

// 跳转并params传参-方式1
this.$router.push("/路由路径/值1/值2")
// 跳转并params传参-方式2
this.$router.push({
    name: "路由名称",
    params: {
        "参数1":值1,
        "参数2":值2
    }
})


// 后退
$router.back()

路由嵌套

router-view中再次包含router-view。

routes:[
  {
    path: '/page1', 
    component: Page1, // 这个组件内部还有router-view
    children: [
      {
        path:'',  // path为空，表示当 #/page1时，显示 Page1组件+组件1
        component: 组件1  // 
      },
      {
        path:'/xx1', // path以/开头，表示当 #/xx1时，显示 Page1组件+组件2
        component: 组件2
      },
      {
        path:'xx2', // path以/开头，表示当 /page1/xx2时，显示 Page1组件+组件3
        component: 组件3
      }
    ]
  }
]

如何手动配置v-router