Vue-router_hash#_路由传参
文章目录
-
- 路由
-
- 例：通过监听hash的改变，展示不同组件
- `vue-router` 基本使用
- 设置路由高亮
- 设置路由切换动画效果
- 路由传参
-
- 注：在路由中使用?传参，不需要改变路由规则
- 1.使用`$route.query.参数名`获取参数
- 2.通过 `this.$route.params`来获取路由中的参数：
- 3.使用`props`获取参数
路由
1.对于单页面应用程序（例：点击链接时，头部和尾部不变，其余位置改变）来说，主要通过URL中的hash来实现不同页面之间的切换
2.前端路由：根据不同的hash地址，在页面上展示不同的前端组件
注：hash #
#不会刷新页面，也不会发起新的HTTP请求，只是实现客户端页面的定位
#后面的字符不会被发送到服务器端
#可以修改浏览器的访问历史记录
window.loaction.hash读取#值
window.onhashchange()监听hash
例：通过监听hash的改变，展示不同组件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="vue.js">script>
head>
<body>
<div id="app">
<a href="#/a">aa>
<a href="#/b">ba>
<a href="#/c">ca>
<component :is="comname">component>
div>
<script>
Vue.component('com1',{
template:'b组件
'
})
Vue.component('com2',{
template:'a组件
'
})
Vue.component('com3',{
template:'c组件
'
})
var vm = new Vue({
el:"#app",
data:{
comname:"com1"
},
methods:{},
mounted(){ //mounted 页面被渲染后做一些事情
//onhashchange函数监听hash改变
window.onhashchange = () => { //使用箭头函数，this指向vm对象
const hash = location.hash
switch(hash){
case "#/a" :
this.comname="com1";
break;
case "#/b" :
this.comname="com2";
break;
case "#/c" :
this.comname="com3";
break;
}
}
}
})
script>
body>
html>
vue-router 基本使用
1.导入路由包
<script src="vue-router.js">script>
2.使用router-link组件导航（创建hash）
表示路由链接，默认渲染为a标签，可通过tag设定标签
<router-link to="/login">登录router-link>
<router-link to="/reg">注册router-link>
3.创建对应组件（直接创建对象）
const login = {
template:"登录组件
"
}
const reg = {
template:"注册组件
"
}
4.创建路由对象，（将组件和链接关联）在路由对象中定义路由规则的数组routes:[ { path:' ', component:' ' } ]
var router = new VueRouter({
routes: [ //路由规则的数组
{ path: '/login', component: login },
{ path: '/reg', component: reg }
{ path: "/", component: login }, //默认根目录时显示登录
// { path: "/",redirect: login }
]
});
5.为vm指定路由对象 router
var vm = new Vue({
el: '#app',
router: router // 使用 router 属性来使用路由规则
});
5.通过
设置路由高亮
当点击"登录"时，"登录"链接增加类名 默认为router-link-active
<style>
.router-link-active{
color: orange;
}
style>
注：linkActiveClass配置默认被选中路由的高亮类名
设置路由切换动画效果
<transition>
<router-view>router-view>
transition>
路由传参
注：在路由中使用?传参，不需要改变路由规则
<router-link to="/login?id=10">登录router-link>
const router = new VueRouter({
routes:[
{path:"login",component:login} //未改变
]
})
1.使用$route.query.参数名获取参数
const login = {
template:"登录zj---{{$route.query.id}}
",
}
2.通过 this.$route.params来获取路由中的参数：
<router-link to="/login/10/zs">登录router-link>
const login = {
template:"登录zj---{{$route.params.id}}---{{$route.params.name}}
",
}
const router = new VueRouter({
routes:[
{path:"/login/:id/:name",component:login}, //改变路由规则
{path:"/",component:login},
// {path:"/",redirect:reg}
]
})
3.使用props获取参数
在组件中使用$route使之与其路由形成高度耦合，从而使组件只能在某些特定的url上使用
使用props将组件和路由解耦
const login = {
props:["id","name"]
template:"登录zj---{{id}}---{{name}}
",
}
const router = new VueRouter({
routes:[
{path:"/login/:id/:name",component:login,props:true}, //增加props
{path:"/",component:login},
// {path:"/",redirect:reg}
]
})