Vue路由機制

 

視圖層：

主要是<router-link>和<router-view>兩個標簽

<router-link>執行時會轉換成<a>，並根據自己的to屬性將路由地址轉變成href的值，然后渲染在<router-view>標簽中。

 

js配置路由的兩種寫法

寫法一：

index.js

Vue.use(Router)

export default new Router({
  routes: [
    {path:'/',component:Home},
    {path:'/detail',component:detail}
  ]
})

main.js

import router from './router/index.js'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app-box')

 

寫法二：

main.js

import Home from 'xxx'
import detail from 'xxx'

Vue.use(VueRouter)

const routes = [{　　//定義路由表
  path: '/',
  component: Home
},{
  path: '/detail',
  component: detail
}]

const router = new VueRouter({創建router管理上面定義好的routes
  routes
})

new Vue({　　　　//將配置好的router注入Vue根實例中
  router,
  render: h => h(App)
}).$mount('#app-box')