建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
詳解vue-router使用實(shí)例
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁(yè)面應(yīng)用。vue的單頁(yè)面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問路徑，并將路徑和組件映射起來。
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import './assets/css/common.css'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '',
components: { App }
})
router文件夾里面的index.js
import Vue from 'vue'
import Router from 'vue-router'
import home from '../components/home' //這里可以選擇2種寫法，一種是寫在這里，一種是寫在component里面，看下方代碼~
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
{
path: '/',
component: home
},
{
path:'/pagevue',
component:pagevue => require(['../components/childCom/pagevue.vue'], pagevue),
},
{
path:'/nextpagevue',
component:nextpagevue => require(['../components/childCom/nextpagevue.vue'], nextpagevue),
}
]
})
home.vue
我是首頁(yè)
"clickMe">點(diǎn)我進(jìn)下一個(gè)路由
pagevue.vue
我是子頁(yè)面
"returnhome">點(diǎn)我繼續(xù)進(jìn)下一個(gè)路由
nextpagevue.vue
我是另外一個(gè)子頁(yè)面
"clickGohome">點(diǎn)我回到首頁(yè)
common.css
* {
margin: 0;
padding: 0; }
.homeMain {
text-align: center;
margin-top: 100px; }
.homeMain .routerName {
color: #1eb89c;
border: 1px solid #1eb89c;
margin-top: 20px; }
/*# sourceMappingURL=common.css.map */
文章標(biāo)題：詳解vue-router使用實(shí)例
文章分享：http://fisionsoft.com.cn/article/dpgjicc.html
