vue-router基本使用
参考:https://blog.csdn.net/wuhenzhangxing/article/details/80707145
一、路由的3个基本概念:route、routes、router
1、route:表示一条路由
2、routes:表示一组路由
3、router:表示路由机制,用来管理路由
二、客户端路由的两种实现方式
1、基于hash
2、基于H5 history api
三、路由实现
1、HTML页面
有两个标签,
2、JS页面
import Vue from "vue";
import Router from "vue-router"
const routes=[
{path:"/home",component:Home},
{path:"/about",component:About},
];
const router=new Router({routes});
const app=new Vue({ router}).$mount("#app");
三、路由重定向
在routers里面加上一条route:{path:"*",redirect:"/home"}:表示重定向到home页面
四、动态路由
在routes里面添加一条route:{path:"/about/:id",component:About}:其中(:id)就表示动态的参数,如
五、嵌套路由
在一些比较复杂的单页应用里面,不仅有一级路由,可能还存在二级路由,这就需要要用到嵌套路由。
1、首先在一级路由页面添加二级路由的的点击部分:
2、在router里面添加二级路由
const routes=[
{
path:"/home",
conponent:Home,
children:[
{path:"one",component:One},
{path:"two",component:Two},
{path:"three",component:Three},
]
}
]
六、路由命名
给每条route增加一个name属性,如:{path:"/home",name:"home",component:Home},
这样在点击部分就可以使用name属性了,如:
七、懒加载
改变routes的写法:
const routes=[
{path:"/home",component:resolve=>require(['./home.vue'],resolve)},
{path:"/about",component:resolve=>require(['./about.vue'],resolve)},
【vue-router基本使用】]
推荐阅读
- 由浅入深理解AOP
- 做一件事情的基本原理是什么()
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- dubbo基本认识
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件