版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yaocong1993/article/details/84454761
一、路由
后端路由:对于普通的网站,所有的超链接都是URL地址,URL地址对应服务器上的资源;
前端路由:对于单页面应用程序,主要通过URL中的hash(#)来实现页面跳转,HTTP请求中不会包含hash相关的内容。
插件下载:https://github.com/vuejs/vue-router,https://unpkg.com/vue-router/dist/vue-router.js
在Vue后面加载vue-router,它会自动安装。
<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>
1、路由的基本使用
<div id="app">
<!-- 点击a链接,修改url地址,Vue实例上的router监听到url地址的改变,展示对应组件 -->
<!-- <a href="#/foo">Go To Foo</a> -->
<!-- <a href="#/bar">Go To Bar</a> -->
<!-- <router-link>默认会被渲染成一个<a>标签,通过传入to属性指定链接地址 -->
<router-link to="/foo">Go To Foo</router-link>
<router-link to="/bar">Go To Bar</router-link>
<!-- 路由出口,路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script>
// 1.定义(路由)组件
const Foo={template:'<div>foo</div>'};
const Bar={template:'<div>bar</div>'};
// 2.定义路由
// path:监听的路由链接地址。component:要展示的组件,是一个模板对象,不能是组件名
const routes=[
{path:'/foo',component:Foo},
{path:'/bar',component:Bar}
];
// 3.创建router实例,配置路由
const router=new VueRouter({
routes // 相当于routes:routes
});
// 4.创建Vue实例,注册路由
const vm=new Vue({
el:'#app',
router // 注册路由,监听url地址的变化,展示对应组件
});
</script>
2、重定向和别名
重定向:当用户访问/a时,url将会被替换成/b,然后匹配路由为/b,如用于使根路径重定向为显示某个组件。重定向通过routes配置来完成。
const routes=[
{path:'/',redirect:'/foo'}, // 重定向
{path:'/foo',component:Foo}
];
别名:/a的别名是/b意味着,当用户访问/b时,url保持为/b,但路由匹配为/a,和访问/a一样。
const routes=[
{path:'/a',component:A,alias:'/b'}
];
3、<router-link>
tag:使用tag属性指定router-link渲染的标签类型,默认值'a'。还是会监听点击,触发导航。
linkActiveClass:这是路由构造函数中的选项,设置链接激活时使用的CSS类名,默认值"router-link-active"。通过该类名可设置路由高亮的样式。
4、路由组件传参
(1)? & $route.query
使用查询字符串给路由传递参数,不需要修改路由规则的path属性。
<router-link to="/foo?id=10&name=cong">Go To Foo</router-link>
const foo={
template:'<div>Foo--{{$route.query.id}}--{{$route.query.name}}</div>',
created(){
console.log(this.$route.query.id);
}
}
(2)/ : $route.params
<router-link to="/foo/10/cong">Go To Foo</router-link>
const foo={
template:'<div>Foo--{{$route.params.id}}--{{$route.params.name}}</div>',
created(){
console.log(this.$route.params.id);
}
}
const routes=[
{path:'/foo/:id/:name',component:foo}
];
(3)props
5、嵌套路由
<div id="app">
<router-link to="/user">User</router-link>
<router-view></router-view>
</div>
<template id="user">
<div>
<h3>最高级路由</h3>
<router-link to="/user/profile">Profile</router-link> <!-- 嵌套<router-link> -->
<router-view></router-view> <!-- 嵌套<router-view> -->
</div>
</template>
<script>
const User={
template:'#user'
};
const Profile={ // 嵌套路由的组件
template:'<div>被嵌套的路由</div>'
};
const router=new VueRouter({
routes:[
{
path:'/user',
component:User,
children:[ // 用children定义嵌套路由
{path:'profile',component:Profile} // 没有/,以/开头的嵌套路径会被当作根路径
]
}
]
});
const vm=new Vue({
el:'#app',
router
});
</script>
6、命名视图
有时想同级展示多个视图,而不是嵌套展示。可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果router-view没有设置名字,默认为default。
一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。使用components配置(带上s)。
<div id="app">
<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
<script>
const router=new VueRouter({
routes:[
{path:'/',components:{
default:header,
left:leftBox,
main:mainBox
}
}
]
});
</script>