2.路由配置

路由安装 npm i vue-router，如果使用@vue/cli脚手架创建vue项目，会在创建过程中选择是否安装。

1.vue-router使用

在 src 目录下创建 router 文件夹，该文件夹下创建 index.js 文件。

import Vue from "vue";
import VueRouter from "vue-router";
import config from "../../route_config" 
Vue.use(VueRouter);
const routes = config.routes

const router = new VueRouter({
  // mode: 'hash',
  routes,
});

export default router;

其中的 route_config.js 文件是创建在根目录下，如果我们需要在项目中区分不同模块的路由，就可以用到，如果不需要区分，则不需要该文件。

let options = {
  routes: [], //路由列表
  modelName: "", //模块名称
};
if (process.env.VUE_APP_PROJECT_NAME == "") {
} else {
  options.modelName = "默认模块";
  options.routes = [...require("@/router/modules/allRoute.js").default];
}
export default options;

在 router文件夹下创建 modules 文件夹存放不同模块的路由，创建 allRouter.js 存放默认模块的路由信息。

export default [
  {
    path: '/Test1',
    name: 'Test1',
    component: () => import("@/views/Test1/index.vue"),
  }
]

此时路由信息就算是配置好了，现在需要挂载到 Vue 上，也就是在 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-view> </ router-view>，<router-view/> 标签可以根据 url 来展示对应 url 的内容。此时路由页面就会展示在 <router-view> </ router-view> 位置。一般 <router-view> </ router-view> 是在App.vue 文件中。

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

2.路由跳转

方式一：<router-link />

<router-link /> 标签可以代替 <a>标签去改变 url，进而改变 <router-view> </ router-view> 展示的内容。

<template>
  <div id="app">
    <nav>
      <!-- 直接跟 url 内容 -->
      <router-link to="/test1">1</router-link> |
      <!-- 跟一个对象,可以是 name 然后后面是 路由里配置的 name 值-->
      <router-link :to="{name: 'test1'}">2</router-link> |
      <!-- 跟一个对象,可以是 path 然后后面 url,如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始-->
      <router-link :to="{path: '/3'}">3</router-link> |
    </nav>
    <router-view />
  </div>
</template>

方式二：this.$router.push()

this.$router.push("/test1");
this.$router.push({ name: "test1" });
this.$router.push({ path: "/test1" });

方式三：this.$router.replace() 方法同 push

方式四：this.$router.go(n)

向前或者向后跳转 n 个页面，n 可为正整数或负整数。

push replace go 区别

• this.$router.push 跳转到指定 url 路径,并向 history 栈中添加一个记录,点击后退会返回到上一个页面。

• this.$router.replace 跳转到指定 url 路径,但是 history 栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)。

• this.$router.go(n)向前或者向后跳转 n 个页面,n 可为正整数或负整数。

3.路由传参

query传参，传的参数会在 url 后面通过 ? 拼接出来,通过 path 和 name 都可以 query 传参。

传参：

• html传参

<router-link :to="{name:'home', query: {id:1}}" />
<router-link :to="{path:'/home', query: {id:1}}" />

• js传参

this.$router.push({ name: "home", query: { id: "1" } });
this.$router.push({ path: "/home", query: { id: "1" } });

接收：

 html 取参  $route.query.id
 script 取参  this.$route.query.id

params 传参，传的参数不会在 url 后面显示出来,且只能通过 name 跳转

传参

•  html传参

<router-link :to="{name:'home', params: {id:1}}" />

• js传参

this.$router.push({ name: "home", params: { id: "1" } });

 接收：

html 取参  $route.params.id
script 取参  this.$route.params.id

如果在路由规则里配置 path,刷新页面参数就不会消失,不然刷新就会消失。

路由配置 path: "/home/:id" 或者 path: "/home:id" ,
不配置path ,第一次可请求,刷新页面id会消失
配置path,刷新页面id会保留