一、vue-router 基本用法
(1) 先声明两个组件模板对象
var login = {template: "#login"}
var reg = {template: "#reg"}
(2)创建路由对象
var router = new VueRouter({
routes:[
{path:'/login',component: login},
{path:'/reg',component: reg}
]
})
routes是一个数组,是用来声明路由匹配规则;
这里component的值,是要路由到的组件模板对象的名字
(3)将router对象挂载到vm身上
var vm = new Vue({
el:'.app',
// 3.将router对象挂载到vm身上
router:router
})
(4)使用router-link标签路由到相应的组件,router-view给路由匹配到的组件,在视图区中占个位置
<div class="app">
<router-link to="login">登录</router-link>
<router-link to="reg">注册</router-link>
<!-- 4.在视图区中,给路由匹配到的组件,占个位置 -->
<router-view> </router-view>
</div>
router-link在页面中会默认生成一个a标签 。
二、前端路由实现原理hash
(1) 通过window.location.hash 拿到地址栏中的url
(2)利用window对象身上的 onhashchange方法,实现路由监听
<button class="btn">获取哈希</button>
<script>
var btn = document.getElementsByClassName('btn')[0];
btn.onclick = function(){
console.log(window.location.hash);
}
window.onhashchange = function(){
console.log(window.location.hash);
}
</script>
三、路由导航链接样式设置
(1)router-link的 tag 属性
<router-link to="login" tag="span">登录</router-link>
<router-link to="reg" tag="span">注册</router-link>
tag属性可以设置路由链接生成的标签类型。
(2)router对象的linkActiveClass属性和linkExactActiveClass
linkActiveClass属性,可以自定义router-link激活类的名字
linkActiveClass: 'my-active'
表示不渲染router-link-exact-active 这个类
linkExactActiveClass:''
(3)路由匹配的exact模式
vue-router的路由匹配中有一个exact模式
router-link在渲染的时候,他是非精确匹配的
如图 '/login' 中 包含了 '/' 所以链接中 Home 和 登录 都被渲染了
var home = {template:'<h1>这是Home组件</h1>'}
var login = {template:'<h1>这是登录组件</h1>'}
var reg = {template:'<h1>这是注册组件</h1>'}
var router = new VueRouter({
routes:[
{path:'/login', component:login},
{path:'/reg', component:reg},
{path:'/',component:home}
],
})
可以在router-link中添加 exact 属性(boolen类型) 来解决这个问题
<router-link to="/" exact tag="span">Home</router-link>
四、路由重定向redirect
如果想网页一打开就是是登录组件,可以这样做,但是这样做,url中 /login 显示的组件与 / 显示的组件 一样 会产生一定的困扰;
var login = {template:'<h1>这是登录组件</h1>'}
var reg = {template:'<h1>这是注册组件</h1>'}
var router = new VueRouter({
routes:[
{path:'/login', component:login},
{path:'/reg', component:reg},
{path:'/', component:login}
]
})
可以是用路由重定向的方法解决这个问题
{path:'/', redirect:'/login'}
五、路由嵌套
(1)在父组件中使用路由
<div class="app">
<router-link to="home">Home</router-link>
<router-view></router-view>
</div>
<template id="home">
<div>
<h1>这是Home组件</h1>
<router-link to="/home/login">登录</router-link>
<router-link to="/home/reg">注册</router-link>
<router-view></router-view>
</div>
</template>
(2)在路由对象router中使用子路由
var home = {template:'#home'}
var login = {template:'<h1>这是登录组件</h1>'}
var reg = {template:'<h1>这是注册组件</h1>'}
const router = new VueRouter({
routes:[
// 使用子路由
{
path:'/home',
component: home,
children:[
// 子路由要么写完整,要么只写路由名,连'/'都不要有
{path:'login',component:login},
{path:'reg',component:reg}
]
}
]
})
六、路由传参
服务端传参方式
1.get传参:url:www.aynu.com/login.ashx?name=sun&pwd=123;
2.post传参:通过form表单.
路由传参
指的是我们在使用vue.js开发前端应用程序时的传参方式;
是前端传参,不会向服务端发送请求,是组件与组件之间的传参,传递的参数都在路由中.
Vue路由传参方式有2种: 1. query 2. params
1.query传参
(1)在路由中传入参数
<router-link to="/login?id=8&age=21">登录</router-link>
(2)通过this.$route.query访问query参数对象
var login = {
template:'<h1 @click="add">这是登录组件</h1>',
data:function(){
return {
id: '',
age:''
}
},
created(){
this.id = this.$route.query.id;
this.age = this.$route.query.age;
},
methods: {
add: function(){
console.log(this.id+':'+this.age);
}
},
}
2.params传参
(1)在路由中传入参数
<router-link to="/login/8/21">登录</router-link>
(2)修改路由匹配规则
const router = new VueRouter({
routes:[
{path:'/login/:id/:age',component:login}
]
})
(3)通过this.$route.params访问query参数对象
var login = {
template:'<h1 @click="add">这是登录组件</h1>',
data:function(){
return {
id: '',
age:''
}
},
created(){
this.id = this.$route.params.id;
this.age = this.$route.params.age;
},
methods: {
add: function(){
console.log(this.id+':'+this.age);
}
},
}
3.query传参与params传参的区别
(1)传参的方式不同
(2)params需要修改路由匹配规则,query不需要
(3)访问参数对象方法不同:this.$route.query / this.$route.params