1、安裝VueRouter
npm install vue-router
2、配置VueRouter
a. src目錄下新建 router.js
b. router.js中引入
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
c. 配置路由
import PageA from './pages/pagea.vue';
import PageB from './pages/pageb.vue'
const routes = [
{
path: '/',
component: PageA
},
{
path: '/',
component: PageA
}
]
d. 實例化路由,導出
const router = new VueRouter({
routes
})
export defatult router
3、main.js中應用路由
import router from './router.js'
// 從路由渲染頁面
new Vue({
router,
}).$mount('#app');
4、index.html中引入路由標簽
<div id="app">
<router-view></router-view>
</div>
以上完成正常vue中簡單的路由配置使用
注： 使用路由配置時開發環境運行會報 runtime錯誤，需要添加vue.config.js配置
錯誤內容：
vue.runtime.esm.js?2b0e:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
從vueCli的官檔中可以查出問題
解決辦法：
在vue.config.js中配置項： runtimeCompiler: true
如果是新搭的腳手架，那么需要手動在根目錄創建 vue.config.js文件
module.exports = {
runtimeCompiler: true,
};
加入后需要重新啟動環境，重新編譯才能生效