vue: router的基础

动态组件和v-if组件的缺点:

1. 切换组件后没有url没有变化，是个单页面。
2. 父子组件传值繁琐

这两问题可以被vue-router插件解决。

官网文档: 安装 | Vue Router

但是vue-router的缺点如下:

1. 第一次加载慢
2. 不适合做seo索引的页面，如公司宣传

安装:

方法一: 使用npm方式下载添加到运行时候的依赖

        npm install vue-router --save
      

方法二: 在使用vue-cli创建项目的时候，勾选上Router

使用:

1. 引入插件
2. 告诉vue要使用router插件
3. 创建vueRouter实例
4. 告诉vue实例要使用的vueRouter实例

        // main.js入口文件相关配置
import vueRouter from 'vue-router'
Vue.use(vueRouter)
const router = new vueRouter({
})
new Vue({
  render: h => h(App),
  router,
  // 使用该vue-router
}).$mount('#app')

      

配置vueRouter实例

我们先创建两个间的的组件，home和user。

在实例中配置路由功能routes: 如果url匹配上path的值，则切换到component组件中。

        // 使用了模块化，把router分出来做了一个单独的文件router.js
// 在main.js中使用import引入该文件即可使用
import Vue from 'vue'
import vueRouter from 'vue-router'
import Home from './components/home'
import User from './components/user'
Vue.use(vueRouter)
export default new vueRouter({
// 配置路由功能
  routes: [
    {path: "/", component: Home},
     // 遇上/加载home组件
    {path: "/user", component: User}
     // 遇上/user 加载user组件
  ],
  mode: "history"
  // hash模式和history模式
})

      

使用router-view标签来做组件切换的位置

        <!-- App.vue文件 -->
<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        <h1>Routing</h1>
        <router-view></router-view>
        <!-- 切换路由的部分 -->
      </div>
    </div>
  </div>
</template>
      

模式:

hash模式:

1. 在url后面会多一个#
2. 在url后面无论再输入什么值也不会跟后台请求数据

history模式:

1. 简洁
2. 在url后面输入东西，会跟后台请求，如果不存在则404

小结: 如果使用history模式，请求到不正确的url，使用404不好看的话，告诉后台返回index.html或者什么都不做即可。

后台配置:

HTML5 History 模式 | Vue Router

router-link标签

我们先写一个header.vue组件，然用户点击home则跳转到home组件，点击user则跳转到user组件。再把这个组件引入到App.vue文件中。

        <template>
    <div>
        <ul class="nav nav-pills">
            <li><a href="/">HOME</a></li>
            <li><a href="/user">USER</a></li>
        </ul>
    </div>
</template>
<style scoped>
 .router-link-active {
 color: #d9b611;
    }
</style>
      

但是我们发现a标签有一个默认跳转行为，处理起来有点麻烦。

我们可以使用router-link来代替a标签。

        <li><router-link to="/" exact>Home</router-link></li>
<li><router-link to="/user">User</router-link></li>
<!-- router-link默认是a标签 -->
      

router-link直接就切换了，没有跳转行为。并且被选中的时候有一个.router-link-active的class

router-link中的exact属性:

.router-link-active的class默认是模糊匹配，两个标签中都包含"/"，两个标签都可以匹配到class，如果只想要一个就使用exact。

精确匹配

模糊匹配

router-link中的tag属性:

tag属性可以把router-link标签变成其他标签，这更方便写层级样式

把router-link变成li标签，然后再里面嵌套一个简单的a标签。

        <router-link tag="li" active-class="active" to="/" exact><a>HOME</a></router-link>
<router-link tag="li" active-class="active" to="/user"><a>USER</a></router-link>
      

使用Js切换组件:

思路: 由于我们已经在vue实例中引入了vue-router实例，所以可以使用已经挂载的vue-router实例。

        <template>
    <div>
        <hr>
        <p>这是user组件</p>
        <button class="btn btn-primary" @click = 'goToHome'>跳转到主页</button>
    </div>
</template>
<script>
export default {
    methods: {
 goToHome() {
 this.$router.push("/")
 // this.$router.push({path: "/"})  // 可以写成对象的形式
 // push方法跳转路由
        }
    }
}
</script>
<style scoped>

</style>