Vue-router
前端路由和后端路由的概念
前端路由:对于单页面应用程序来说,主要通过url中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容,所以单页面程序中的页面跳转主要用hash实现。
后端路由:对于普通的网站,所以得超链接都是url地址,所有的url地址都对应服务器上对应的资源。
在vue中使用vue-router步骤
1、导入vue-router组件类库
<script src="./lib/vue-router-3.0.1.js"></script>
2、创建一个路由对象,当导入vue-router包之后,在window全局对象中,就有了一个路由的构造函数,叫做VueRouter。
routes:表示路由匹配规则,每个路由匹配规则都是一个对象,这个规则对象身上必须有两个属性。
属性1是path,表示监听哪个路由链接地址
属性2是component,表示如果路由是前面匹配到的path,则展示component属性对应的那个组件(注意:component的属性值,必须是一个组件的模板对象,不能是组件的引用名称)
var routerObj = new VueRouter({
routes : [
{path: '/login', component: login},
{path: '/register', component: register}
],
})
3、创建组件模板对象
var login = {
template: '<h1>登录组件</h1>'
}
var register = {
template: '<h1>注册组件</h1>'
}
4、将路由规则对象,注册到vm实例上,router指向routerObj,用来监听url地址的变化,然后展示相应的组件
var vm = new Vue({
el:'#app',
data:{},
methods:{},
router: routerObj //将路由规则对象,注册到vm实例上,用来监听url地址的变化,然后展示相应的组件
});
5、使用router-view组件来显示匹配到的组件,这是vue-router提供的元素,专门用来当做占位符的,将来路由规则匹配到的组件,就会展示到这个router-view中去,所以可以认为router-view是一个占位符
<div id="app">
<router-view></router-view>
</div>
6、使用router-link组件来导航
不使用router-link导航方式:
<a href="#/login">登录</a>
<a href="#/register">注册</a>
使用router-link导航方式,router-link默认渲染为一个a标签:
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>
7、当首次进入该页面时,默认login页面,使用redirect重定向修改根目录的hash值
{path: '/', redirect: '/login'},
8、设置选中组件高亮的方式
方式1:
<style>
.router-link-active, .myactive{
color: red;
font-weight: 800;
font-style: italic;
font-size: 80px;
text-decoration: underline;
background-color: green;
}
</style>
方式2:通过路由构造选项linkActiveClass
linkActiveClass: 'myactive'
运行结果:
在路由规则中定义参数
方式1:使用query方式传递参数。通过this.$route.query.id获取url地址中的id
<body>
<div id="app">
<!-- 如果在路由中,使用查询字符串,给路由传递参数,则不需要修改路由规则的path属性 -->
<router-link to="/login?id=10&name=zs">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: '<h1>登录 --- {{ $route.query.id}} --- {{ $route.query.name }}</h1>',
created(){ //组件的生命周期钩子函数
console.log(this.$route.query.id)
}
}
var register = {
template: '<h1>注册</h1>'
}
var router = new VueRouter({
routes: [
{path: '/login', component: login},
{path: '/register', component: register}
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
router
});
</script>
</body>
方式2:使用params方式传递参数。通过this.$route.params.id获取url地址中的id
运行结果:
路由嵌套
使用children属性实现路由嵌套。
嵌套路由就是在一个路由页面下继续使用路由,也就是路由中的路由。
进出根目录#/出现Account;
进入路径#/account出现<h1>文本和<a>登录和注册链接
进入路径#/account/login,这是二级路由,account下的东西不变,点击登录出现<h3>的文本,这里采用的是children属性,实现子路由
注意:子路由的path前面,不要带/,否则永远以根路径开始请求
<body>
<div id="app">
<router-link to="/account">Account</router-link>
<router-view></router-view>
</div>
<template id="tmp1">
<div>
<h1>这是Account组件</h1>
<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
<router-view></router-view>
</div>
</template>
<script>
// 组件的模板对象
var account = {
template: '#tmp1'
}
var login = {
template: '<h3>登录</h3>'
}
var register = {
template: '<h3>注册</h3>'
}
var router = new VueRouter({
routes: [
{path: '/account',
component: account,
// 使用children属性,实现子路由,同时子路由的path前面,不要带/,否则永远以根路径开始请求,这样不方便用户去理解url地址
children:[
{path: 'login', component: login},
{path: 'register', component: register}
]},
// {path: '/account/login', component: login},
// {path: '/account/register', component: register}
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
router
});
</script>
</body>