Vue路由机制

Posted 2020-10-14 小楼昨夜又东风

 

视图层：

主要是<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‘)