锐客网

  1. 首页 > it技术 > >

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）就表示动态的参数，如关于和关于都会跳转到About组件页面去，只是所带的参数不同。
五、嵌套路由
在一些比较复杂的单页应用里面，不仅有一级路由，可能还存在二级路由，这就需要要用到嵌套路由。
1、首先在一级路由页面添加二级路由的的点击部分：
one
two
three
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属性了，如：或者this.$router.push("home")
七、懒加载
改变routes的写法：
const routes=[
{path:"/home",component:resolve=>require(['./home.vue'],resolve)},
{path:"/about",component:resolve=>require(['./about.vue'],resolve)},
【vue-router基本使用】]

    推荐阅读


    上一篇：每天一问，自我教练，助力成长Day|每天一问，自我教练，助力成长Day 33

    下一篇：复盘（阿何30天写作训练营）