Vue-router_hash#_路由传参

文章目录路由例：通过监听hash的改变，展示不同组件`vue-router` 基本使用设置路由高亮设置路由切换动画效果路由传参注：在路由中使用?传参，不需要改变路由规则1.使用`$route.query.参数名`获取参数2.通过 `this.$route.params`来获取路由中的参数：3.使用`props`获取参数路由1.对于单页面应用程序（例：点击链接时，头部和尾部不变，其余位置改变）来说，

liaoai

3814人浏览 · 2021-11-07 23:20:25

liaoai · 2021-11-07 23:20:25 发布

文章目录

- 路由

路由

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>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <a href="#/a">a</a>
        <a href="#/b">b</a>
        <a href="#/c">c</a>

        <component :is="comname"></component>
    </div>

    <script>
        Vue.component('com1',{
            template:'<h3>b组件</h3>'
        })
        Vue.component('com2',{
            template:'<h3>a组件</h3>'
        })
        Vue.component('com3',{
            template:'<h3>c组件</h3>'
        })

        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:"<h3>登录组件</h3>"
}
const reg = {
	template:"<h3>注册组件</h3>"
}

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-view></router-view>展示匹配的组件（默认不会被渲染元素）（路由组件的容器）

设置路由高亮

当点击"登录"时，"登录"链接增加类名默认为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:"<h3>登录zj---{{$route.query.id}}</h3>",
}

2.通过 `this.$route.params`来获取路由中的参数：

<router-link to="/login/10/zs">登录</router-link>

const login = {
    template:"<h3>登录zj---{{$route.params.id}}---{{$route.params.name}}</h3>",
}

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:"<h3>登录zj---{{id}}---{{name}}</h3>",
}

const router = new VueRouter({
	routes:[
		{path:"/login/:id/:name",component:login,props:true}, //增加props
		{path:"/",component:login},
		// {path:"/",redirect:reg}
	]
})

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^