vue中靜態(tài)路由的示例分析-創(chuàng)新互聯(lián)

 

 
Hello App!
 

 
 
 
 Go to Foo
 Go to Bar
 
 
 
 

然后是js代碼

首先定義路由組件，組件可以是簡單的組件（template簡單定義即可），也可是extend定義的復(fù)雜組件

接下來定義路由映射表，就是定義路徑和組件之間的映射　

然后使用路由映射表創(chuàng)建路由對象　

最后使用路由對象創(chuàng)建vue對象，并掛載到指定元素

// 0. 如果使用模塊化機制編程，導(dǎo)入 Vue 和 VueRouter，要調(diào)用 Vue.use(VueRouter)
 
// 1. 定義（路由）組件。
// 可以從其他文件 import 進來
const Foo = { template: '
foo
' }
const Bar = { template: '
bar
' }
 
// 2. 定義路由
// 每個路由應(yīng)該映射一個組件。 其中"component" 可以是
// 通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器，
// 或者，只是一個組件配置對象。
// 我們晚點再討論嵌套路由。
const routes = [
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar }
]
 
// 3. 創(chuàng)建 router 實例，然后傳 `routes` 配置
// 你還可以傳別的配置參數(shù), 不過先這么簡單著吧。
const router = new VueRouter({
 routes // （縮寫）相當(dāng)于 routes: routes
})
 
// 4. 創(chuàng)建和掛載根實例。
// 記得要通過 router 配置參數(shù)注入路由，
// 從而讓整個應(yīng)用都有路由功能
const app = new Vue({
 router// （縮寫）相當(dāng)于 router: router
1
}).$mount('#app') // 現(xiàn)在，應(yīng)用已經(jīng)啟動了！

上例中，路由映射表實例名為routes，在創(chuàng)建路由對象時可以縮寫，如果不叫routes，比如叫routesa，則創(chuàng)建路由對象時必須寫routes:routesa

創(chuàng)建vue對象時，路由對象名也一樣，如果不叫router，也不能縮寫

使用extend創(chuàng)建模板

var todoItem = Vue.extend({
  data: function() {
   return {
    todoData: [
     { id: 0, text: '蔬菜' },
     { id: 1, text: '奶酪' },
     { id: 2, text: '隨便其它什么人吃的東西' }
    ]
   };
  },
  template: `
  

   
    {{ d.text }}
   
  
 `,
 
 });
 
 
 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

 

 
 
 
 

 

 
  
   
    
     
Router Basic - 01