在使用vue cli創(chuàng)建項(xiàng)目時(shí)可以添加vue-router,或使用npm安裝vue-router

配置路由跳轉(zhuǎn):

// ./src/router/index.js
//1. 導(dǎo)入
import Vue from 'vue'
import VueRouter from 'vue-router'
//導(dǎo)入組件
import Home from '../components/Home'
import About from '../components/About'
//安裝Vue-router
Vue.use(VueRouter)
//在路由對(duì)象中配置路由
const routes = [
  {
    path:'/home',
    component: Home
  },

  {
    path:'/about',
    component:About
  }
]
//全局路由控制器
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

//4. 導(dǎo)出全局路由控制器并使用
export default router

//./src/main.js
// 導(dǎo)入全局控制器
import router form './router'
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

//導(dǎo)入文件夾會(huì)自動(dòng)查找index.js

實(shí)踐使用：

1. 創(chuàng)建路由組件：

在components文件夾下創(chuàng)建組件并導(dǎo)出

<template>
  <div>
      <h2>home</h2>
      <p>Home_text</p>
  </div>
</template>

<script>
export default {
    name:'Home'
};
</script>

<style scoped>
</style>

<template>
  <div>
    <h2>About</h2>
    <p>About_text</p>
  </div>
</template>

<script>
  export default {
    name:'About'
  }
</script>

<style scoped>

</style>

2. 配置路由映射

在router文件夾下的index.js導(dǎo)入組件并配置路的關(guān)系

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home'
import About from '../components/About'
Vue.use(VueRouter)

const routes = [
  {
    path:'/home',
    component: Home
  },

  {
    path:'/about',
    component:About
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3. 在所需位置通過<router-link>和<router-view>使用路由

//app.vue
<template>
  <div id="app">
    <router-link to='/home'> HOME </router-link>    
    <router-link to='/about'> ABOUT </router-link>    
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  
}
</script>

<style>

</style>

<router-link>和<router-view>

<router-link>

<router-link>激活時(shí)的class：

當(dāng)<router-link>處于激活狀態(tài)時(shí)，會(huì)對(duì)渲染出來的替換<router-link>的標(biāo)簽添加class=“router-link-exact-active router-link-active”屬性，可在<style>標(biāo)簽中添加樣式。

默認(rèn)添加的class

改變默認(rèn)的class名稱，可用active-class屬性。
<router-link active-class='active' to='/about'> ABOUT </router-link>
或者在全局路由配置中復(fù)寫linkActiveClass
const router = new VueRouter({...,linkActiveClass:'active'})

<router-link>改變history為replace模式：

<router-link replace to='/about'> ABOUT </router-link>    

替換<router-link>的形式：

<router-link>是vue-router中的已經(jīng)內(nèi)置的全局組件，<router-link>默認(rèn)渲染為<a>標(biāo)簽，如果想替換成其他的標(biāo)簽，可是用以下方法進(jìn)行替換：

1. 使用原生的標(biāo)簽進(jìn)行替換：

Vue的所有的組件中都繼承了Vue原型組件的$router屬性，因此可以在事件監(jiān)聽中修改$router,通過在 Vue 根實(shí)例的 router 配置傳入 router 實(shí)例，下面這些屬性成員會(huì)被注入到每個(gè)子組件。

• this.$router

  router 實(shí)例。

• this.$route

  當(dāng)前激活的路由信息對(duì)象。這個(gè)屬性是只讀的，里面的屬性是 immutable (不可變) 的，不過你可以 watch (監(jiān)測變化) 它。

<template>
  <div id="app">
    <!-- <router-link to='/about' tag='button'> ABOUT </router-link>    
    <router-link to='/home' tag='button'> HOME </router-link>-->
    <button @click.prevent="homeBtnClick">HOME</button>
    <button @click.prevent="aboutBtnClick">ABOUT</button>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    homeBtnClick() {
      if(this.$router.currentRoute.path !== '/home')//vue-router 不允許多次push同一個(gè)url
//if(this.$route.path!=='/about')
      this.$router.replace("/home");
    },
    aboutBtnClick() {
      if(this.$router.currentRoute.path !== '/about')
      this.$router.replace("/about");
    }
  }
}
</script>

錯(cuò)誤信息

vue-router不允許多次push同一個(gè)url，因此要檢測上一次的url是否為當(dāng)前url
if(this.$route.path!=='/about')也可以

2. 使用tag屬性替換默認(rèn)形式

<router-link tag='button' to='/about'> ABOUT </router-link>    

<router-view>

<router-view>會(huì)根據(jù)當(dāng)前的路徑動(dòng)態(tài)地渲染出不同的組件。網(wǎng)頁中的其他內(nèi)容，比如頂部的標(biāo)題、導(dǎo)航等會(huì)和<router-view>處于同一層級(jí)。
在處理路由切換時(shí)，切換的是<router-view>掛載的組件，其他的內(nèi)容不會(huì)發(fā)生改變。