Vue-router的基本使用

vue-router的定义

• 这里的路由并不是我们平时所说的硬件路由器，这里的路由就是单页面应用^ ① 的路径管理器

• vue-router是Vue.js官方提供的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

• vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径与组件映射起来。

• 传统的页面应用，使用一些超链接实现页面切换和跳转。在vue-router单页面应用中则是路径之间的切换，也就是组件的切换

• 路由模块的本质就是建立起url和页面之间的映射关系

vue-router的使用方式

1. npm安装npm i vue-router -S
2. 在vouter文件夹下新建一个index.js文件并导入路由对象
3. 调用Vue.use(VueRouter)
4. 创建路由实例，并传入路由映射配置
5. 在Vue实例中挂载创建的路由实例
6. 在app.vue中留坑<router-view></router-view>

• 安装路由插件，配置路有关系

// index.js
// 导入路由对象
import Vue from 'vue';
import VueRouter from 'vue-router';
// 主体
import About from './components/About.vue';
import Home from './components/Home.vue';
// 安装插件
Vue.use(VueRouter);
// 创建路由对象并配置路由规则
let router = new VueRouter({
    // 配置路由映射关系
    routes: [
        {
            path: '/home',
            component: Home
        },
        {
            path: '/about',
            component: About
        }
    ]
});

• 在Vue实例中挂载路由对象

new Vue({
    el: '#app',
    // 在Vue实例中挂载创建的路由实例
    router: router, // 可以简写为router
    render: c => c(App),
})

• 在app.vue中留坑

//app.vue中
<template>
    <div>
        <!-- 留坑，非常重要 -->
        <!-- router-view标签会根据当前的路径，动态渲染出不同的组件 -->
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        name: 'app',
        data(){
            return {}
        }
    }
</script>

通过路由模块来实现页面跳转

• 方式1：<router-link to="路由地址"></router-link>

• 方式2：this.$router.push('路由路径')

①router-link

• router-link标签是一个vue-router中已经内置的组件，它会被渲染成一个<a>标签；属性to指向与路径path对应的组件

<div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
</div>

• 对router-link其他属性的补充

  ①tag

  • tag可以用于指定router-link被渲染成什么样式

  <!-- 不再是一个<a>标签，而是被渲染成一个按钮-->
  <router-link to="/home" tag="button">Home</router-link>
  

  ②replace

  • replace不会留下history记录，所以指定history的情况下，后退键不能返回到上一个记录

  <!-- 点击不会返回上一页面--><router-link to="/home" tag="button" repalce>Home</router-link>
  

  ③active-class

  • 当router-link对应的路由处于活跃状态时，浏览器会默认给该路由添加一个名为router-link-active的类，使用某些方式可以修改这个类名
  • 为router-link添加active-class属性，设置活跃状态时在router对象中添加linkActiveClass类名，此种方式一般用于批量修改

  <router-link to="/home" tag="button" active-class="active">Home</router-link>
  
  const router = new VueRouter({ routes, linkActiveClass: 'active'})
  

②this.$router.push()

• this.$router可以获取到当前的url信息，通过调用push等方法来修改路径同时可以实现路由的跳转

<button @click="homeClick">Home</button>

methods: {
    homeClick() {
        //调用push方法可以回退，调用replace方法不可回退
        this.$router.push('/home')
        // this.$router.replace('./home')
    }

$router与$route的区别

1. $router是VueRouter的一个对象，这个对象是一个全局对象，它包含了所有的路由和许多关键的对象和属性

2. $route是一个跳转的路由对象，每一个路由都会有一个$route对象，它是一个局部对象，可以获取到对应的name、path、params、query等

路由路径的样式

①Hash模式

• vue-router默认hash模式——使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。

• hash（#）是URL的锚点，代表的是网页中的一个位置，hash出现在URL中，但不会包含在http请求中，对后端完全没有影响。

• 每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用“后退”按钮，就可以回到上一个位置。

  如：http://www.abc.com/#/hello

②History模式

• 由于hash模式会在url中自带#，如果不想要很丑的hash，我们就可以用路由的history模式
• 在配置路由规则时，加入“mode：‘history’”，即可将路由的实现方式改变为history模式

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})