<!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>
<style>
.router-link-active {
color: red;
}
.v-enter,
.v-leave-to {
opacity: 0;
}
.v-enter-active,
.v-leave-active {
transition: 1s;
}
.v-enter-to,
.v-leave {
opacity: 1;
}
</style>
</head>
<body>
<script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
<!-- 第一步:在vue之后导入vue-router插件 -->
<script src="./vue-router.js"></script>
<div id="myApp">
<!-- 第二步:在根组件模板中,添加路由跳转标签 -->
<h1 style="text-align: center;">
<!-- vue路由封装了组件标签 router-link ,用于替代a标签,属性to设置跳转的路径,不需要加#,渲染的时候会自动补上#-->
<!-- 1.声明式导航跳转(标签跳转) 在根组件模板中,使用router-link组件标签实现路由跳转-->
<router-link to="/main">主页</router-link>|
<router-link to="/login">登录</router-link>|
<router-link to="/user">个人</router-link>
</h1>
<!-- 第六步:在根组件模板合适的位置,添加路由出口(组件渲染的位置) -->
<!-- 路由在跳转的时候,默认会销毁重建组件,所以组件数据状态会重置,如果不想组件状态重置可以在路由出口添加keep-alive组件 -->
<!-- 如果路由切换的时候,还需要添加动画效果,再添加一层transition即可 -->
<transition>
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
</div>
<script>
// 第三步:在全局作用域,创建路由跳转页面对应的组件
var MainCom = Vue.component("mainCom", {
template: "<h2>这是主页{{$route.query.name}}</h2>",
// ----------------------------------------------------------
// 二 在跳转的页面使用
// 使用$route.query.name
//
// ----------------------------------------------------------
created() {
console.log("主页创建", this.$route.query.name);
},
// activated 只执行一次
activated() {
console.log("主页显示", this.$route.query.name);
},
})
// ----------------------------------------------------------
// 一
// 有两种跳转方式 编程式 声明式
// url 使用拼接键值对的方式拼接
// ----------------------------------------------------------
var LoginCom = Vue.component("loginCom", {
template: `<h2>这是登录 <input type="text" v-model="msg">
<router-link :to="'/main?name='+msg">主页</router-link>
</h2>`,
data() {
return {
msg: ""
}
},
})
var UserCom = Vue.component("userCom", { template: "<h2>这是个人页</h2>" })
// 组件在创建之后,返回值是组件的构造函数
console.log(MainCom);
// 第四步:创建路由对象,配置路由信息
const router = new VueRouter({
// routes数组中配置路由信息对象,一个对象对应一个路由信息
routes: [
// path表示路由的地址,省略了#,component表示组件,值是组件的构造函数,而不是组件名
{ path: "/main", component: MainCom },
{ path: "/login", component: LoginCom },
{ path: "/user", component: UserCom },
// 默认打开页面,路由默认的路径是/,可以给默认/路径添加配置
{ path: "/", redirect: "/main" }
// redirect表示路由重定向,当首次打开页面的时候,默认hash路径是/,此时路由重定向,hash路径修改为/main,达到默认访问/main的目的
]
})
new Vue({
el: '#myApp',
// 第五步:把路由信息对象加入vue根组件对象中
// router:router
router
})
// 总结: 路由传值 - url拼接传值
// 1.在路由跳转前的组件内,给路由路径后添加?键值对拼接数据传值
// <router-link :to="'/main?name='+msg">主页</router-link>
// 2.在路由跳转后的组件内,使用$route对象调用query字段接收数据
// $route.query.name this.$route.query.name
</script>
</body>
</html>
vue2路由传值-url传值
于 2023-07-06 10:11:37 首次发布