vue学习笔记——vue-router(路由)
使用路由的时候有两个必要的知识:<router-link></router-link>:这个相当于a标签,点击的切换时候的按钮,<router-view></router-view>:这个就是你加载过来的组件放的位置
使用方法:
1、cnpm install vue-router --save 下载路由
2、在main.js 里面引入路由:import vueRouter from 'vue-router'
3、定义路由:Vue.use(vueRouter);
4、导入建立的路由的js:routerConfig.js (名字自己可以取)
5、实例化路由:
const router = new vueRouter({
routes:vueRouterConfig
})
6、导出路由:
new Vue({
el: '#app',
router,
render: h => h(App)
})
main.js的代码:
import Vue from 'vue';
import App from './App.vue';
import vueRouter from 'vue-router';
import vueRouterConfig from './router/vueRouterConfig.js'
Vue.use(vueRouter);//定义router
const router = new vueRouter({ //实例化router
routes:vueRouterConfig
});
new Vue({
el: '#app',
router,
render: h => h(App)
})
app.vue的代码:
routerConfig.js的代码:
嵌套路由:
routerConfig.js中的代码:
import yiji from './../views/yiji.vue';
import yijiTwo from './../views/yijiTwo.vue';
import erjiOne from './../views/erjiOne.vue';
import erjiTwo from './../views/erjiTwo.vue';
export default[
{
path:'/yiji',
component:yiji,
children:[
{
path:'erjiOne',
component:erjiOne
},
{
path:'erjiTwo',
component:erjiTwo
},
]
},
{
path:'/yijiTwo',
component:yijiTwo
},
{
path:'/',
redirect:'/yiji' //配置默认页面
}
];
其中嵌套路由需要使用children:[],把嵌套的路由写进去。
使用时:
如果您有发现文中存在错误,欢迎留言指出,提前感谢!