Vue2.X VueRouter

写在前面： 此博客记录自己学习vue学习笔记，如有侵权，联系删！
学习来源： Vue + Vue-Cli 快速入门教程
李南江老师各平台账号：

• 微博：极客江南
• 微信公众号：李南江
• 腾讯课堂： 李南江
• 网易云课堂：李南江

VueRouter 基本使用

什么是Vue Router?
Vue Router和v-if v-show一样, 是用来切换组件的显示的
v-if v-show是标记来切换(true/false)
Vue Router用哈希来切换(#/xxx)
比v-if v-show强大的是Vue Router不仅仅能够切换组件的显示, 还能够在切换的时候传递参数

Vue Router使用
1、导入Vue Router

<script src="js/vue.js"></script>
<!--1.导入Vue Router-->
<!--注意点: 必须先导入Vue之后再导入Vue Router-->
<script src="js/vue-router.js"></script>

2、定义路由规则

// 1.定义组件
const one = {
   
    template: "#one"
};
const two = {
   
    template: "#two"
};
// 2.定义切换的规则(定义路由规则)
const routes = [
    // 数组中的每一个对象就是一条规则
    {
    path: '/one', component: one },
    {
    path: '/two', component: two }
];

3、根据路由规则创建路由对象

const router = new VueRouter({
   
	routes: routes
});

4、将路径对象挂载到Vue实例中

// 这里就是MVVM中的View Model
let vue = new Vue({
   
    el: '#app',
    // 4.将创建好的路由对象绑定到Vue实例上
    router: router,
    // 这里就是MVVM中的Model
    data: {
   
    },
    // 专门用于存储监听事件回调函数
    methods: {
   
    },
    // 专门用于定义计算属性的
    computed: {
   
    },
    // 专门用于定义局部组件的
    components: {
   
        one: one,
        two: two
    }
});

5、修改URL哈希值

<div id="app">
    <a href="#/one">切换到第一个界面</a>
    <a href="#/two">切换到第二个界面</a>
</div>

6、通过<router-view>渲染匹配的组件

<div id="app">
    <a href="#/one">切换到第一个界面</a>
    <a href="#/two">切换到第二个界面</a>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

组件代码：

<template id="one">
    <div class="onepage">
        <p>我是第一个界面</p>
    </div>
</template>
<template id="two">
    <div class="twopage">
        <p>我是第二个界面</p>
    </div>
</template>

VueRouter router-link

什么是router-link?
通过a标签确实能设置URL的hash,但是这种方式并不专业
在Vue Router中提供了一个专门用于设置hash的标签 router-link

router-link特点
默认情况下Vue会将router-link渲染成a标签, 但是我们可以通过tag来指定到底渲染成什么

给router-link设置选中样式
默认情况下我们可以通过重写router-link-active类名来实现设置选中样式
但是我们也可以通过linkActiveClass来指定选中样式

重定向路由
{ path: '被重定向值', redirect: '重定向之后的值' }

css代码：

*{
   
	margin: 0;
    padding: 0;
}
.onepage, .twopage{
   
    width: 500px;
    height: 500px;
}
.onepage{
   
    background: pink;
}
.twopage{
   
    background: skyblue;
}
/*.router-link-active{*/
/*    background: red;*/
/*}*/
.nj-active{
   
    background: skyblue;
}

html代码：

<div id="app">
    如果是通过router-link来设置URL的HASH值, 那么不用写#, 那么是通过to属性来设置HASH值
    -->
    <!--
    默认情况下Vue在渲染router-link的时候, 是通过a标签来渲染的
    如果在企业开发中不想使用a标签来渲染, 那么可以通过tag属性来告诉vue通过什么标签来渲染
    -->