vue中靜態(tài)路由的示例分析
這篇文章將為大家詳細(xì)講解有關(guān)vue中靜態(tài)路由的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)基于成都重慶香港及美國(guó)等地區(qū)分布式IDC機(jī)房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動(dòng)大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)服務(wù)器托管報(bào)價(jià)，主機(jī)托管價(jià)格性價(jià)比高，為金融證券行業(yè)雅安服務(wù)器托管，ai人工智能服務(wù)器托管提供bgp線路100M獨(dú)享，G口帶寬及機(jī)柜租用的專業(yè)成都idc公司。
前言
vue的單頁(yè)面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問路徑，并將路徑和組件映射起來(lái)。傳統(tǒng)的頁(yè)面應(yīng)用，是用一些超鏈接來(lái)實(shí)現(xiàn)頁(yè)面切換和跳轉(zhuǎn)的。在vue-router單頁(yè)面應(yīng)用中，則是路徑之間的切換，也就是組件的切換。
首先在html中，引入vue-router.js和vue.js，用router-link觸發(fā)路由跳轉(zhuǎn)，router-link可以像a標(biāo)簽一樣使用和定義樣式
router-view區(qū)域是路由匹配到的組件渲染的地方
Hello App!
Go to Foo
Go to Bar
然后是js代碼
首先定義路由組件，組件可以是簡(jiǎn)單的組件（template簡(jiǎn)單定義即可），也可是extend定義的復(fù)雜組件
接下來(lái)定義路由映射表，就是定義路徑和組件之間的映射
然后使用路由映射表創(chuàng)建路由對(duì)象
最后使用路由對(duì)象創(chuàng)建vue對(duì)象，并掛載到指定元素
// 0. 如果使用模塊化機(jī)制編程，導(dǎo)入 Vue 和 VueRouter，要調(diào)用 Vue.use(VueRouter)
// 1. 定義（路由）組件。
// 可以從其他文件 import 進(jìn)來(lái)
const Foo = { template: 'foo
' }
const Bar = { template: 'bar
' }
// 2. 定義路由
// 每個(gè)路由應(yīng)該映射一個(gè)組件。 其中"component" 可以是
// 通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器，
// 或者，只是一個(gè)組件配置對(duì)象。
// 我們晚點(diǎn)再討論嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 創(chuàng)建 router 實(shí)例，然后傳 `routes` 配置
// 你還可以傳別的配置參數(shù), 不過先這么簡(jiǎn)單著吧。
const router = new VueRouter({
routes // （縮寫）相當(dāng)于 routes: routes
})
// 4. 創(chuàng)建和掛載根實(shí)例。
// 記得要通過 router 配置參數(shù)注入路由，
// 從而讓整個(gè)應(yīng)用都有路由功能
const app = new Vue({
router// （縮寫）相當(dāng)于 router: router
1
}).$mount('#app') // 現(xiàn)在，應(yīng)用已經(jīng)啟動(dòng)了！上例中，路由映射表實(shí)例名為routes，在創(chuàng)建路由對(duì)象時(shí)可以縮寫，如果不叫routes，比如叫routesa，則創(chuàng)建路由對(duì)象時(shí)必須寫routes:routesa
創(chuàng)建vue對(duì)象時(shí)，路由對(duì)象名也一樣，如果不叫router，也不能縮寫
使用extend創(chuàng)建模板
var todoItem = Vue.extend({
data: function() {
return {
todoData: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '隨便其它什么人吃的東西' }
]
};
},
template: `
`,
});
Home = { template: '
foo
' }
About = { template: '
bar
' }
routes = [
{ path: '/home', component: Home },
{ path: '/about', component: todoItem }
]
router = new VueRouter({
routes:routes // （縮寫）相當(dāng)于 routes: routes
});
app = new Vue({
router:router
}).$mount('#app');
還可以這樣寫template
abc
Router Basic - 01
重慶分公司
重慶分公司