Vue Router

一、简介

1、前提

在Webpack的【Vue组件化抽离】中，可以发现使用Vue以这种模式开发，最终打包的入口文件只有一个html文件，该程序被称为 SPA（单页应用程序），那么就没法使用传统的页面跳转去切换页面，因为Vue中已经没有真实的多页面了，都是组件(.vue)

2、性质

Vue Router 就是用于将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们，模拟一个多页面交互的效果

---

二、基本配置

1、前提

（1）终端操作

①创建项目

vue create lean-router

②进入项目目录

cd lean-router

③安装vue-router

npm install vue-router@3

④启动项目

npm run serve

（2）main.js文件操作

import Vue from 'vue'
import App from './App.vue'
// 引入
import VueRouter from 'vue-router'
 
// 使用
Vue.use(VueRouter)
Vue.config.productionTip = false
 
new Vue({
  render: h => h(App),
}).$mount('#app')

2、原理代码

（1）src文件夹下新建文件夹views（项目已有就不用创建啦）=》新建HomePage.vue=》构建vue代码框架

（2）页面组件引入

// 组件引入
import Home from "vue-router"

（3）路由映射配置

const routes=[
  {
    path:'/home',//注意是/不是./
    namePage:'HomePage',//建议写每个路由唯一的名字
    component:'Home',//注意component没有s
  }
]

（4）路由实例的创建

const router = new VueRouter({
  // routes:routes,
  routes//增强写法
})

（5）启用：在Vue实例中使用

import Vue from 'vue'
import App from './App.vue'
// 引入
import VueRouter from 'vue-router'
// 组件引入
import Home from "@/views/HomePage.vue"
 
// 使用
Vue.use(VueRouter)
Vue.config.productionTip = false
 
const routes=[
  {
    path:'/home',//注意是/不是./
    namePage:'HomePage',//建议写每个路由唯一的名字
    component:Home,//注意component没有s
  }
]
 
const router = new VueRouter({
  // routes:routes,
  routes//增强写法
})
 
new Vue({
  // Vue实例使用
  router,
  render: h => h(App),
}).$mount('#app')

（6）指定位置显示

<router-view />

三、封装VueRouter

1、创建文件

在src文件夹下创建文件夹router=》创建router.js

2、引入及使用

根据上面原理的步骤，在router.js文件中进行Vue、VueRouter、组件的引入及使用

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/HomePage.vue";
 
Vue.use(VueRouter);
 
const routes = [
  {
    path: "/home", //注意是/不是./
    namePage: "HomePage", //建议写每个路由唯一的名字
    component: Home, //注意component没有s
  },
];
 
const router = new VueRouter({
  // routes:routes,
  routes, //增强写法
});

3、导出、导入router

router.js文件

import Vue from 'vue'
import App from './App.vue'
import router from "./router/router.js"
 
Vue.config.productionTip = false
 
new Vue({
  // Vue实例使用
  router,
  render: h => h(App),
}).$mount('#app')

4、配置第二个页面

（1）在views文件夹下创建AboutPage.vue文件

（2）在router.js文件配置AboutPage新页面的路由

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/HomePage.vue";
import About from "@/views/AboutPage.vue";
 
Vue.use(VueRouter);
 
const routes = [
  {
    path: "/home", //注意是/不是./
    name: "HomePage", //建议写每个路由唯一的名字
    component: Home, //注意component没有s
  },
  {
    path: "/about",
    name: "AboutPage",
    component: About,
  },
];
 
const router = new VueRouter({
  // routes:routes,
  routes, //增强写法
});
 
export default router;

四、路由跳转

1、router-link组件

（1）属性

①to：指定当前组件要激活的路由，值来源于【routes】中的【path】

②tag：此组件默认渲染为<a>标签，传入标签名可以指定其渲染的标签

（2）App.vue文件编写

<template>
  <div id="app">
    <router-link to="/home" tag="button">主页</router-link> |
    <router-link to="/about" tag="button">关于</router-link>
    <router-view />
  </div>
</template>

2、$router对象

（1）push(location)

location：跳转目标路由，可以是字符串路径，或一个描述地址的对象

①字符串

$router.push('home') //注意没有./注意是router不是route

②对象

$router.push({ path: 'home' })

（2）replace()

替换掉当前的路由，不会在浏览器的 history 中记录【即页面跳转后无法返回】

①字符串

$router.replace('home')

②对象

router.replace({ path: 'home' })

<template>
  <div id="app">
    <router-link to="/home" tag="button">主页</router-link> |
    <router-link to="/about" tag="button">关于</router-link>
 
    <div>
      <span @click="goHome">主页</span> |
      <span @click="goAbout">关于</span>
    </div>
 
    <router-view />
  </div>
</template>
 
<script>
 
export default {
  name: 'App',
  components: {
  },
  methods:{
    goHome(){
      this.$router.push('home')
    },
    goAbout(){
      this.$router.repalce('about')
    }
  }
}
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

（3）go(n)

在浏览器history记录中，向前或后退n步。n：整数。

---

五、激活样式

1、nav标签

没有任何样式效果，通过用于包裹router-link

<nav>
  <router-link to="/home" tag="button">主页</router-link> |
  <router-link to="/about" tag="button">关于</router-link>
</nav>

2、找选择器

nav .router-link-active {
  color: red;
}

六、路由参数

1、query参数

使用定义路由时的path属性进行跳转，参数会显示在 浏览器地址栏 上【刷新不会消失】

（1）传递参数

①在<router-link>的to属性后加? 进行拼接

<router-link to='/home?id=1234' tag='button'></router-link>

②$router对象

goHome() {
  this.$router.push({
    path:'home',
    query:{
      name:'传过去'
    }
  });
},

（2）获取参数：到传递参数的页面HomePage.vue，进行参数获取

<template>
  <div>
    <h1>主页</h1>
    <button @click="getName">获取name</button>
  </div>
</template>

methods: {
    getName() {
      console.log(this.$route.query);
    },
  },

2、params参数

使用定义路由时的name属性进行跳转，参数不会显示在 浏览器地址栏上

（1）传递参数

goAbout() {
  this.$router.replace({
    name:'AboutPage',
    params:{
      age:18
    }
  });
},

（2）获取参数

<template>
    <div>
        <h1>关于</h1>
        <button @click="getAge">获取age</button>
    </div>
</template>

methods: {
    getAge(){
        console.log(this.$route.params);
    }
},

（3）注意

①要在router.js文件中，定义路由name属性唯一，name:"HomePage"

②此方式跳转带参，在刷新 参数会消失

③跳转时，若写成query的属性，参数参数会失败

3、动态路径参数

（1）区别

【query传参】可以让参数保留在链接里，用户分享链接时不丢失参数

【params传参】可以避免参数名暴露，但是用户分享连接时会丢失参数

【动态路径参数】结合了以上两者的优点，既能保留参数信息在链接里，又能避免暴露参数名

（2）格式：path:"path.../:key"

①在router.js文件中，进行path拼接

const routes = [
  {
    path: "/home/:userName", //注意是/不是./
    name: "HomePage", //建议写每个路由唯一的名字
    component: Home, //注意component没有s
  },
  {
    path: "/about",
    name: "AboutPage",
    component: About,
  },
];

②在App.vue文件跳转路径拼接

<router-link to="/home/sxx" tag="button">主页</router-link>

（3）query传参

goHome() {
  this.$router.push({
    path:'/home/zhangsan',   //注意home前面有/
  });
},

（4）params传参

goHome() {
this.$router.push({
  name:'HomePage',
  params:{
    userName:'zhangsan'
  }
});
},