第一种方法,用命名路由传值
代码如下:
在绑定时<router-link?:to="{name:'home1'}">小说首页</router-link>
<!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>
</head>
<body>
<div id="app">
<div>
<!-- 变量需要绑定 -->
<router-link :to="{name:'home1'}">小说首页</router-link>-----------------
<!-- 绑定变量 -->
<router-link :to="artObj">小说列表</router-link>
<!-- query的参数 会在地址栏 进行拼接 类似get请求的参数方式
params 并不会出现在 地址栏当中 -->
<!-- <router-link :to="{name:'detailName',params:{id:123},query:{name:'zh'}}">详情页</router-link> -->
</div>
<hr>
<!-- 路由出口 就是匹配路径的页面在哪里显示 -->
<router-view></router-view>
</div>
<script src="../zuoye/作业-星级评分/vue.js"></script>
<!-- 需要引用路由文件 -->
<script src="./vue-router.js"></script>
<script type="text/x-template" id="first">
<div class="first-wrapper">
<h1>小说首页加载完成</h1>
<ul>
<li v-for="(v, index) in names" :key="index">
<span>{{v}}</span>
</li>
</ul>
</div>
</script>
<script type="text/x-template" id="second">
<div class="second-wrapper">
<h1>小说列表页</h1>
<ul>
<li v-for="(v, index) in articles" :key="index">
<router-link :to="{name:'detailName',params:{id:v.id},query:{obj:v}}">命名路由-跳转-传参:{{v.title}}</router-link>
</li>
</ul>
</div>
</script>
<!-- 小说详情页 -->
<script type="text/x-template" id="artDetail">
<div>
<h1>{{artDetailObj.title}}</h1>
<h1>{{artDetailObj.content}}</h1>
</div>
</script>
<script>
// 数据
var dataArr = [
{
id: 1,
title: "天龙八部",
content: "北宋年间，外族纷纷觊觎大宋国土，形成汉、辽对立的局面。丐帮帮主乔峰（胡军饰）因拒绝副帮主妻康敏（钟丽缇饰）之爱遭报复指为契丹人后裔而受尽中原武林人士唾弃。乔峰为平反遂四出追查身世，期间认识了大理世子段誉（林志颖饰）及虚竹和尚（高虎饰），并结拜为兄弟。乔峰追寻身世时屡遭奸人所害，含冤莫白，更错杀红颜知己阿朱（刘涛饰），后为救朱妹阿紫（陈好饰）寻医至大辽，辗转成为大辽国南院大王，但与中原关系则更趋恶劣。段誉为人豁达开朗，对貌若天仙的王语嫣（刘亦菲饰）一见倾心，可惜语嫣只钟情其表哥慕容复（修庆饰），令三人陷入一段纠缠不清的苦恋。虚竹天性纯良，宅心仁厚，深得高人指点，武功高强，后被选为西夏驸马。乔峰、段誉和虚竹在异域拥有着举足轻重的地位，在汉辽相争的时势下，各种江湖及情感上的恩恩怨怨正等着他们去面对 。"
},
{
id: 2,
title: "价值-张磊",
content: "介绍了张磊的个人历程、他所坚持的投资理念和方法以及他对价值投资者自我修养的思考，还介绍了他对具有伟大格局观的创业者、创业组织以及对人才、教育、科学观的理解"
},
{
id: 3,
title: "人生若只初见",
content: "似在谈诗词，又似在谈风月。她不拘泥于对古典诗词字面的理解，也非传统意义上的简单赏析，而是一种风格独特、感情丰富的散文随笔"
}
];
// 首页
const First = {
template: "#first",
data() {
return {
names: ['首页模块-1', '首页模块-2', '首页模块-3', '首页模块-4', '首页模块-5']
}
}
}
// 列表页
const Second = {
template: "#second",
data() {
return {
articles: dataArr
}
}
}
// 详情页
const ArticleDetail = {
template: "#artDetail",
data(){
return{
artId:"",
artDetailObj:null
}
},
created() {
this.artId = this.$route.params.id
this.artDetailObj = this.$route.query.obj
},
}
// 路由表
// 命名路由就是给 路由起个别名
var routes = [
{
// 路由表有这个值 上面需要绑定 {name:'home1'}
path: "/",
name: "home1",
component: First
},
{
path: "/second",
name: "artiD",
component: Second
},
{
path: "/detail",
name: "detailName",
component: ArticleDetail
}
]
// 路由实例
const router = new VueRouter({
routes
})
// vue实例
new Vue({
el: "#app",
router,
data: {
artObj: {
name: "artiD"
}
},
components: {
First,
Second,
ArticleDetail
}
})
</script>
</body>
</html>
如果需要添加评论页:
在列表页添加显示方法:
<script type="text/x-template" id="second">
<div class="second-wrapper">
<h1>小说列表页</h1>
<!-- 常规path写法 -->
<router-link to="/pinglun">评论页</router-link>
<!-- 命名路由的写法 -->
<!-- <router-link :to="{name:'pl'}">评论页</router-link> -->
<ul>
<li v-for="(v, index) in articles" :key="index">
<router-link :to="{name:'detailName',params:{id:v.id},query:{obj:v}}">命名路由-跳转-传参:{{v.title}}</router-link>
</li>
</ul>
<!-- 怎样区分 一级路由 二级路由 -->
<!-- 哪个页面的路由一般对应哪个界面的路由出口 -->
<router-view></router-view>
</div>
</script>
?添加模块
<script type="text/x-template" id="comment">
<div>
<h1>评论页</h1>
<ul>
<li>小说不错</li>
<li>男主很帅</li>
<li>挂太多了</li>
<li>希望不是来凑数的</li>
</ul>
</div>
</script>
// 评论页
const Comment = {
template: "#comment"
}
?路由表写法:
// 路由表
// 命名路由就是给 路由起个别名
var routes = [
{
// 路由表有这个值 上面需要绑定 {name:'home1'}
path: "/",
name: "home1",
component: First
},
{
path: "/second",
name: "artiD",
component: Second,
// 默认子路由渲染 path
redirect: "/pinglun",
children: [
//详情页
{
path: "/pinglun",
name: "pl",
component: Comment
},
{
path: "/detail",
name: "detailName",
component: ArticleDetail
}
]
},
]
第二种方式:path跳转传值
与第一方式不同在于:<router-link?to="/?name=zh&age=18">小说首页</router-link>
注意::这个to在绑定时,不加:!!!!
?命名路由 name 和 路由表里面的name对应 ? 后面 不进行路由匹配
?也就是路由匹配 ?匹配的是url里面 路径部分
?也就是端口号后面 ? 前面的部分
<div id="app">
<div>
<router-link to="/?name=zh&age=18">小说首页</router-link>-----------------
<!-- 绑定变量 -->
<router-link :to="artObj">小说列表</router-link>
<hr>
<!-- 路由出口 就是匹配路径的页面在哪里显示 -->
<router-view></router-view>
</div>
?在当前页面二级菜单的跳转有更改
<script type="text/x-template" id="second">
<div class="second-wrapper">
<h1>小说列表页</h1>
<ul>
<li v-for="(v, index) in articles" :key="index">
<!-- path跳转
0. :to=基本结构 绑定变量 模板字符串
1.复制 详情页的path
2.参数拼接?
-->
<router-link :to="'/detail/'+v.id+ '?title='+v.title+'&content='+v.content">path路由-跳转-传参:{{v.title}}</router-link>
</li>
</ul>
</div>
</script>
// 首页
const First = {
template: "#first",
data() {
return {
names: ['首页模块-1', '首页模块-2', '首页模块-3', '首页模块-4', '首页模块-5']
}
}
}
// 列表页
const Second = {
template: "#second",
data() {
return {
articles: dataArr
}
},
}
// 详情页
const ArticleDetail = {
template: "#artDetail",
data(){
return{
artId:"",
artDetailObj:{}
}
},
created() {
this.artDetailObj.title= this.$route.query.title
this.artDetailObj.content= this.$route.query.content
},
}
?
第三种方式;当前页显示二级菜单内容:
方式二的基础上加上:?<router-view></router-view>
<script type="text/x-template" id="second">
<div class="second-wrapper">
<h1>小说列表页</h1>
<ul>
<li v-for="(v, index) in articles" :key="index">
<!-- path跳转
0. :to=基本结构 绑定变量 模板字符串
1.复制 详情页的path
2.参数拼接? &
字符串的 基础拼接
-->
<router-link :to="'/detail/'+v.id+ '?title='+v.title+'&content='+v.content">path路由-跳转-传参:{{v.title}}</router-link>
</li>
</ul>
<router-view></router-view>
<!-- 路由出口
一级路由对应一级路由的出口
二级路由对应路由的出口
路由在那个界面写,出口就在那个界面
配置二级路由
-->
</div>
</script>
在路由表更改代码如下:关键代码:二级菜单需要用children.
var routes = [
{
// 路由表有这个值 上面需要绑定 {name:'home1'}
path: "/",
name: "home1",
component: First
},
{
path: "/second",
name: "artiD",
component: Second,
// 配置子路由 二级路由
children: [
{
path: "/detail/:artId",
name: "detailName",
component: ArticleDetail
// 路由可以无限的嵌套 三级路由 四级路由 一般不会超过5层
// children[]
}
]
},
]
第三种写法优化.路由监听,当前页面点击刷新.需要加watch事件.
// 详情页
const ArticleDetail = {
template: "#artDetail",
data() {
return {
artId: "",
artDetailObj: null
}
},
watch:{
$route:function(newV,oldV){
console.log("详情页-----newV",newV);
console.log("详情页-----oldV",oldV);
this.artDetailObj = this.$route.query.obj
}
},
created() {
this.artId = this.$route.params.id
this.artDetailObj = this.$route.query.obj
},
}
使用路由钩子实现二级页面在当前页显示
// 详情页
const ArticleDetail = {
template: "#artDetail",
data() {
return {
artId: "",
artDetailObj: null
}
},
created() {
// 两种传值
// params接收的 传递的参数信息
console.log("详情页--路由", this.$route.params)
// query 接收的url地址栏的参数
console.log("详情页--路由", this.$route.query)
// 获取用户传过来的id
// 需要一个数据 来接收 传过来的值
this.artId = this.$route.params.id
console.log("传过来的----id", this.artId);
this.artDetailObj = this.$route.query.obj
},
// 路由钩子函数 路由的生命周期
// 注意不要加r route
beforeRouteUpdate (newV, oldV, next) {
// 必须允许路由继续往前走
next()
console.log("------路由更新之前newV",newV);
console.log("------路由更新之前oldV",oldV);
this.artDetailObj = newV.query.obj
},
routeUpdate(){
console.log("路由更新之后");
}
}
|