對vue-router的知識點還沒有基本了解的小伙伴可以移步至此篇博客
大白話攻破VueRouter重點知識
其他有興趣的小伙伴可以移步至
vue專案中引入echarts
vue專案中引入vuex
繼續往下就是在vue專案中實戰操作了
搭建一個vue專案這里不多贅述，簡單過一下：
vue create newtest
cd newtest
npm run serve
此時vue-cli已經幫助搭建一個簡單的vue架子了，但其中并沒有vue-router；
安裝一下vue-router
npm install vue-router
vue-router的原理是把組件和路由進行一一映射，而映射的規則一般都是寫在index.js
需要自己在src目錄下新建一個
routers/index.js
映射規則檔案
index.js
//引入依賴及組件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Router1 from '../components/router1'
import Router2 from '../components/router2'
Vue.use(VueRouter);
//設定組件映射規則
const routes = [
{
path: '/',
component: Router1
},
{
path: '/router2',
component: Router2
}
]
const router = new VueRouter({
routes
})
//匯出
export default router;
main.js中引入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
//引入匯出的router
router
}).$mount('#app')
App.vue設定路由視圖出口
即根據路由映射出的組件將會在router-view標簽內展示
<router-view></router-view>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/297158.html
標籤：其他
上一篇：前后端格式轉換
下一篇：Moment.js常見用法總結