1.安裝

npm install --legacy-peer-deps [email protected]

要指定版本號 否則會報錯

2. 使用

2.1 在src下建立router目錄，在其中新建index.js檔案

import VueRouter from "vue-router";
//引入一個路由元件
import Home from '../pages/Home'
 
//建立一個路由並暴露出去 注意component沒有引號
export default new VueRouter({
    routes:[
        {
            name:'home',
            path:'/home',
            component:Home
        }]
})
 

2.2 main.js

// 引入路由
import VueRouter from 'vue-router'
import router from './router'
​
Vue.use(VueRouter)
​
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

2.3 App.vue

<template>
  <div id="app">
	<router-link to="/home">home</router-link>
	<router-view></router-view>
  </div>
</template>
 

2.4

• router-link 來建立連結
• router-view 將顯示與 url 對應的元件,放在需要的地方

3.巢狀路由

3.1 index.js

import left from '../pages/panel/Left'
import top from '../pages/panel/top'

routes:[{
	name:'home',
        path:'/home',
        component:home,
	children:[
	{
	  name:'left',
	  path:'/left/:id',
	  component:left,
	  props:true
	},{
	  name:'top',
	  path:'/top',
	  component:top,
	}]
 

3.2 left和top內容頁

<template>
  <div>
    內容2
  </div>
</template>

<script>
  export default{
    name:"top"
  }
</script>

<template>
  <div>
    內容1
  </div>
</template>

<script>
  export default{
    name:"left",
  }
</script>

3.3 home.vue

<template>
  <router-link to="/left">選項1</router-link>
  <router-link to="/top">選項2</router-link>
  <!-- 巢狀路由，點選不同連線 產生的內容頁不同 -->
  <el-main>
      <router-view></router-view>
  </el-main>
</template>

3.4 效果

點選不同路由連線，產生的內容頁不同

4.引數傳遞