vue3.0cli 配置vue-router

安裝

直接在命令行打開項目目錄然後輸入以下代碼進行安裝

npm install vue-router

配置路由

1.使用router-view標籤設置路由顯示層(一般會寫在App.vue文件)
2.配置routes（路由路徑）

index.js 控制文件

import Vue from 'vue'	//引入vue
import VueRouter from 'vue-router'	//引入vue-router模塊
import routes from './routes'	//引入路由配置文件(詳見下方routes.js配置)
Vue.use(VueRouter)	//聲明安裝路由

export default new VueRouter({routes})	//返回實例

routes.js 路由配置文件

//這裏就可以引用你要顯示的頁面了
import bindTel from '@/components/verification/bindTel.vue'
import index from '@/components/HelloWorld.vue'

//配置路由，path就是你瀏覽器地址，component就是跟着你要顯示的頁面，/表示默認地址。
export default [
	{path:"/",component:index},//主頁
	{path:"/bindTel",component:bindTel}//綁定手機號
]

引用路由

全都配置好之後在main.js下引用router文件，以及渲染到視圖。

import router from './router'	//引用router

new Vue({
  render: h => h(App),
  router	//加到這裏渲染到視圖
}).$mount('#app')