vuecli中路由的配置

0.

route：單個路由

routes：多個路由的集合，定義上routes是一個數組，這個數組由對象組成

router：路由器，起管理功能，router會去routes中查找route

1.安裝vue-router

　　npm install vue-router

2.路由配置

三個文件：

router.js

//引入vue
import Vue from 'vue';
//引入vue-router
import VueRouter from 'vue-router';
//第三方庫需要use一下才能用
Vue.use(VueRouter)
//引用page1頁面
import page1  from './page1.vue';
//引用page2頁面
import page2  from './page2.vue';

//定義routes路由的集合，數組類型
const routes=[
    //單個路由均為對象類型，path代表的是路徑，component代表組件
    {path:'/page1',component:page1},
    {path:"/page2",component:page2}
    //可以配置重定向
    {path:'',redirect:"page1"}
    //或者重新寫個路徑為空的路由
    {path:"",component:page1}
]

//實例化VueRouter並將routes添加進去
const router=new VueRouter({
//ES6簡寫，等於routes：routes
    routes
});

//拋出這個這個實例對象方便外部讀取以及訪問
export default router

 

main.js

import Vue from 'vue'
import App from './App'
//引用router.js
import router from './router.js'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
//一定要注入到vue的實例對象上
  router,
  components: { App },
  template: '<App/>'
})

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
//router-link定義頁面中點擊觸發部分　　
      <router-link to="/page1">Page1</router-link>
      <router-link to="/page2">Page2</router-link>
    </div>
//router-view定義頁面中顯示部分
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</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>

　　用重定向和單獨配置路由的區別：

　　重定向實際上是當匹配到路徑符合條件的時候去執行對應的路由，當然這個時候的url上面的地址顯示的是對應的路由，頁面也是對應的路由頁面；

　　重新配置路由是當匹配到路徑符合條件的時候，router-view頁面展示部分負責拿符合條件路由的頁面來展示，實際上url是沒有發生變化的；

 

動態路由、嵌套路由

路由導航（標簽導航、編程式導航(push)）

命名路由