vue-router
### 简介
由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。
有的小伙伴会有疑虑，为什么我们不能像原来一样直接用a标签编写链接呢？因为我们一般用Vue做的都是单页应用，只有一个主页面index.html，所以你写的<a></a>标签是不起作用的，要使用vue-router来进行管理
安装
- 引入就可以了
router-link 使用router-link组件来导航通过传入to属性指定链接， router-link标签会默认被渲染成一个a标签
<router-link to="/demo1">text</router-link>
- to是导航路径：要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to="/"
- text：就是我们要显示给用户的导航名称
router-view 路由出口。路由匹配到的组件将渲染到这里
<router-view></router-view>
vue-router参数传递：首要要实例化一个vue-router的对象
let router = new VueRouter({
routes:[
{path:"/demo1",component:demo1},
{path:"/demo2",component:demo2},
{path:"/demo3",component:demo3},
{path:"/demo4",component:demo4},
{path:"/demo5",component:demo5},
{path:"/demo5/demo6",component:demo6}
]
});
- path:你要传的url路径
- component：你要传的路由组件
hash：默认hash模式，带#的
history：不带#的
let router = new VueRouter({
routes:[
{path:"/demo1",component:demo1},
],
mode:"history"//不设置就默认是hash模式，带#，设置就不会有#
});
linkActiveClass:自定义样式
<style>
.activeLink{
color: brown;
text-decoration: none;
font-size: 24px;
}
</style>
let router = new VueRouter({
routes:[
{path:"/demo1",component:demo1},
],
linkActiveClass:"activeLink",//自定义样式
});
linkExactActiveClass:精确匹配，只匹配需要的路由,不能跟linkActiveClass一起使用，不然会失效
let router = new VueRouter({
routes:[
{path:"/demo1",component:demo1},
],
//linkActiveClass:"activeLink",//自定义样式
linkExactActiveClass:"activeLink"//精确匹配，只匹配需要的路由,不能跟linkActiveClass一起使用，不然会失效
});
最后router还要挂载到实例化Vue对象中
let vm = new Vue({
el:"#app",
// 挂载router
router
});
完整的代码示例
<div id="app">
<p>
<!-- 使用router-link组件来导航通过传入to属性指定链接
router-link标签会默认被渲染成一个a标签
-->
<router-link to="/demo1">go demo1</router-link>
</p>
<!-- 路由出口。路由匹配到的组件将渲染到这里 -->
<router-view></router-view>
</div>
<script>
//定义路由组件
let demo1 = {template:`<div>demo1</div>`};
// 创建router实例，然后传到路由配置
let router = new VueRouter({
routes:[
{path:"/demo1",component:demo1},
],
//linkActiveClass:"activeLink",//自定义样式
linkExactActiveClass:"activeLink"//精确匹配，只匹配需要的路由,不能跟linkActiveClass一起使用，不然会失效
// mode:"history"不设置就默认是hash模式，带#，设置就不会有#
});
//实例化vue对象
let vm = new Vue({
el:"#app",
// 挂载router
router
});
</script>
动态路由
<div id="app">
<p>
<router-link to="/demo1">go demo1</router-link>
</p>
<!-- 路由出口。路由匹配到的组件将渲染到这里 -->
<router-view></router-view>
</div>
<script>
//定义路由组件
let demo1 = {template:`<div>id:{{$route.params.id}}</div>`}
// 创建router实例，然后传到路由配置
let router = new VueRouter({
routes:[
{path:"/demo1/:id",component:demo1}
]
});
//实例化vue对象
let vm = new Vue({
el:"#app",
// 挂载router
router
});
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B8rAsMkl-1608471098243)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20201216222744195.png)]
编程式导航
<div id="app">
<p>
<!-- 路由出口。路由匹配到的组件将渲染到这里 -->
<router-view></router-view>
</div>
<script>
//定义路由组件
let Foo1 = {
template:`<div>
<button @click="toFoo2">go foo2</button>
这是foo1的内容
</div>`,
methods:{
toFoo2(){
//强制跳转的目标路径
this.$router.push("/foo2");
this.$router.go(-1);//后退一级
}
}
}
let Foo2 = {
template:`<div>
<button @click="toFoo1">go foo1</button>
这是foo2的内容
</p></div>`,
methods:{
toFoo1(){
this.$router.push("/foo1");
//this.$router.go(-1);//返回到上一级
}
}
}
// 创建router实例，然后传到路由配置
let router = new VueRouter({
routes:[
{path:"/foo1",component:Foo1},
{path:"/foo2",component:Foo2}
]
});
//实例化vue对象
let vm = new Vue({
el:"#app",
// 挂载router
router
});
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FCaPktLV-1608471098251)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20201216222601325.png)]
children:路由嵌套
<div id="app">
<!-- 路由出口。路由匹配到的组件将渲染到这里 -->
<router-view></router-view>
</div>
<script>
//定义路由组件
let User = {
template:`<div>
<h1>user{{$route.params.id}}</h1>
<router-view></router-view>
</div>`
}
let demo = {
template:`<div>
<h1>demo</h1>
<router-view></router-view>
</div>`
}
let childrenDemo = {
template:`<p>
<span>childrenDemo</span>
</p>`
}
// 创建router实例，然后传到路由配置
let router = new VueRouter({
routes:[
{
path:"/user/:id",
component:User,
children:[
{
path:"demo",
component:demo,
children:[
{
path:"childrenDemo",
component:childrenDemo
}
]
}
]
}
]
});
//实例化vue对象
let vm = new Vue({
el:"#app",
// 挂载router
router
});
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oUiSU3xv-1608471098258)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20201216223104712.png)]
而且他们都是父子级的关系
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sk2eMGXy-1608471098263)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20201216223212159.png)]
扫一扫
935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
