<!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>
// 第三步:在全局作用域,创建路由跳转页面对应的组件
// ----------------------------------------------------------------------
// 使用$route.params
// ----------------------------------------------------------------------
var MainCom = Vue.component("mainCom", {
template: "<h2>这是主页{{$route.params.name}}</h2>",
created() {
console.log("主页创建", this.$route.params.name);
},
activated() {
console.log("主页显示", this.$route.params.name);
},
})
var LoginCom = Vue.component("loginCom", {
template: `<h2>这是登录 <input type="text" v-model="msg">
<router-link :to="obj">主页</router-link>
</h2>`,
data() {
return {
msg: ""
}
},
// ----------------------------------------------------------------------
//在此处数组params
// ----------------------------------------------------------------------
computed: {
obj() {
return {
name: "吴亦凡",//命名路由可通过路由名跳转
params: {//命名路由传值使用params
name: this.msg
}
}
}
}
})
var UserCom = Vue.component("userCom", { template: "<h2>这是个人页</h2>" })
// 组件在创建之后,返回值是组件的构造函数
console.log(MainCom);
// 第四步:创建路由对象,配置路由信息
const router = new VueRouter({
// routes数组中配置路由信息对象,一个对象对应一个路由信息
routes: [
// path表示路由的地址,省略了#,component表示组件,值是组件的构造函数,而不是组件名
// ----------------------------------------------------------------------
// name设置此路由的名字,用于路由跳转传值,设置了name属性的路由,就叫做命名路由
// ----------------------------------------------------------------------
{ path: "/main", component: MainCom, name: "吴亦凡" },
{ path: "/login", component: LoginCom },
{ path: "/user", component: UserCom },
// 默认打开页面,路由默认的路径是/,可以给默认/路径添加配置
{ path: "/", redirect: "/main" }
// redirect表示路由重定向,当首次打开页面的时候,默认hash路径是/,此时路由重定向,hash路径修改为/main,达到默认访问/main的目的
]
})
new Vue({
el: '#myApp',
// 第五步:把路由信息对象加入vue根组件对象中
// router:router
router
})
// 总结: 路由传值 - 命名路由传值
// 1.在路由配置对象中添加name字段设置命名路由
// { path: "/main", component: MainCom,name:"吴亦凡"},
// 2.在路由跳转前的组件内,给to绑定一个对象,name设置路由名,params设置字段
// <router-link :to="obj">主页</router-link>
// return{
// name:"吴亦凡",//命名路由可通过路由名跳转
// params:{//命名路由传值使用params
// name:this.msg
// }
// }
// 3.在路由跳转后的组件内,使用$route对象调用params字段接收数据
// $route.params.name this.$route.params.name
</script>
</body>
</html>
07-03
451
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
11-18
4717
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交