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')
春花秋月何时了?往事知多少。小楼昨夜又东风,故国不堪回首月明中。
雕栏玉砌应犹在,只是朱颜改。问君能有几多愁?恰似一江春水向东流。