文章目录

嵌套路由的实现
- 模板文件index.html
- 入口文件main.js
- App.vue（App组件）
- Header.vue（Header组件）
- router/index.js（路由规则文件）
- About.vue（About组件）
- Home.vue（Home组件）
- News.vue（News组件）
- Message.vue（Message组件）
路由传递params参数
- 万事俱备
- - router/index.js（路由规则文件）
  - Detail.vue（Detail组件）
  - Message.vue（Message组件）
- 东风来了
- - router/index.js（路由规则文件）
  - Detail.vue（Detail组件）
  - Message.vue（Message组件）

嵌套路由的实现

嵌套路由的路由结构如下：

/about，About组件
/home，Home组件
- /home/news，News组件
- /home/message，Message组件

代码涉及的主要文件有：

模板文件index.html
入口文件main.js
入口组件App.vue
一般组件Header：components/Header.vue
路由规则文件：ruoter/index.js
路由组件About：pages/About.vue
路由组件Home：pages/Home.vue
路由组件News：pages/Home/News.vue
路由组件Message：pages/Home/Message.vue

模板文件index.html

<!DOCTYPE html>
<html lang=""><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"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body>
</html>

入口文件main.js

import Vue from 'vue'
import App from './App.vue'
import router from "./router";Vue.config.productionTip = falsenew Vue({render: h => h(App),router
}).$mount('#app')

App.vue（App组件）

<template><div><Header/><div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group"><router-link to="/about" class="list-group-item" active-class="active">About</router-link><router-link to="/home" class="list-group-item" active-class="active">Home</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><router-view></router-view></div></div></div></div></div>
</template><script>
import Header from "./components/Header.vue";
export default {name: "App",components:{Header}
};
</script>

Header.vue（Header组件）

<template><div class="row"><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Vue Router Demo</h2></div></div></div>
</template><script>
export default {name: "Header"
};
</script>

router/index.js（路由规则文件）

import Vue from "vue";
import VueRouter from "vue-router";
import About from "../pages/About.vue"
import Home from "../pages/Home.vue"
import News from "../pages/News.vue";
import Message from "../pages/Message.vue";Vue.use(VueRouter);export default new VueRouter({routes:[{path:"/about",component:About},{path:"/home",component:Home,children:[{path:"/home/news",component:News},{path:"/home/message",component:Message}]}]
})

About.vue（About组件）

<template><h3>我是About的内容</h3>
</template><script>
export default {name:"About"
}
</script>

Home.vue（Home组件）

<template><div><h2>Home组件内容</h2><div><ul class="nav nav-tabs"><li><router-link to="/home/news" class="list-group-item" active-class="active">News</router-link></li><li><router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link></li></ul><router-view></router-view></div></div>
</template><script>
export default {name:"Home"
}
</script>

News.vue（News组件）

<template><ul><li>news001</li><li>news002</li><li>news003</li></ul>
</template><script>
export default {name:"News"
};
</script>

Message.vue（Message组件）

<template><div><ul><li><a href="/message1">message001</a>&nbsp;&nbsp;</li><li><a href="/message2">message002</a>&nbsp;&nbsp;</li><li><a href="/message/3">message003</a>&nbsp;&nbsp;</li></ul></div>
</template><script>
export default {name:"Message"
};
</script>

路由传递params参数

实现需求：点击message001，详情中显示其ID、TITLE、CONTENT。
因为详情（Detail组件）是一个一般组件，故将其放在components文件夹下，即components文件夹下新建：Detail.vue。

代码变更涉及的文件有：

router/index.js，即路由规则文件。
components/Detail.vue，即Detail组件。
pages/Message.vue，即Message组件。

万事俱备

router/index.js（路由规则文件）

import Vue from "vue";
import VueRouter from "vue-router";
import About from "../pages/About.vue"
import Home from "../pages/Home.vue"
import News from "../pages/News.vue";
import Message from "../pages/Message.vue";
import Detail from "../components/Detail.vue";Vue.use(VueRouter);export default new VueRouter({routes:[{path:"/about",component:About},{path:"/home",component:Home,children:[{path:"/home/news",component:News},{path:"/home/message",component:Message,children:[{path:"/home/message/detail",component:Detail}]}]}]
})

Detail.vue（Detail组件）

<template><ul><li>ID：xxx</li><li>TITLE：xxx</li><li>CONTENT：xxx</li></ul>
</template><script>
export default {name:"Detail"
}
</script>

Message.vue（Message组件）

<template><div><ul><li v-for="messageObj in messageArr" :key="messageObj.id"><router-link to="/home/message/detail">{{messageObj.title}}</router-link></li></ul><hr><router-view></router-view></div>
</template><script>
export default {name:"Message",data(){return {messageArr:[{id:"001",title:"message01"},{id:"002",title:"message02"},{id:"003",title:"message03"}]}}
};
</script>

东风来了

router/index.js（路由规则文件）

import Vue from "vue";
import VueRouter from "vue-router";
import About from "../pages/About.vue"
import Home from "../pages/Home.vue"
import News from "../pages/News.vue";
import Message from "../pages/Message.vue";
import Detail from "../components/Detail.vue";Vue.use(VueRouter);export default new VueRouter({routes:[{path:"/about",component:About},{path:"/home",component:Home,children:[{path:"/home/news",component:News},{path:"/home/message",component:Message,children:[{// 声明接收的params参数path:"/home/message/detail/:id/:title",component:Detail}]}]}]
})

Detail.vue（Detail组件）

<template><ul><li>ID：{{id}}</li><li>TITLE：{{title}}</li><li>CONTENT：{{content}}</li></ul>
</template><script>
const contentArr = [{id:"001",content:"中国消费韧性强潜力足特点没改变"},{id:"002",content:"中国队正式递补东京奥运接力铜牌"},{id:"003",content:"中国人口增长率创57年来最大降幅"}
]export default {name:"Detail",computed:{id(){// 接收params参数return this.$route.params.id;},title(){// 接收params参数return this.$route.params.title;},content(){const contentObjMatched = contentArr.find(contentObj => contentObj.id === this.$route.params.id);return contentObjMatched.content;}}
}
</script>

Message.vue（Message组件）

<template><div><ul><li v-for="messageObj in messageArr" :key="messageObj.id"><!-- 发送params参数 --><router-link :to="`/home/message/detail/${messageObj.id}/${messageObj.title}`">{{messageObj.title}}</router-link></li></ul><hr><router-view></router-view></div>
</template><script>
export default {name:"Message",data(){return {messageArr:[{id:"001",title:"message01"},{id:"002",title:"message02"},{id:"003",title:"message03"}]}}
};
</script>

路由传递params参数（vue）相关推荐

Vue路由传递params参数
[vue] 路由的params参数
配置路由,声明接收params参数 {path:'/home',component:Home,children:[{path:'news',component:News},{component:Mes ...
路由的params参数
文章目录例子小结例子本篇基于路由的query参数中的完整实例.params参数从路由组件Message.vue传递给路由组件Detail.vue. 修改了router/index.js. im ...
vue2进阶篇：vue-router之路由的params参数
文章目录 10.7路由的params参数案例:将案例改为"路由的params参数" 完整代码本人其他相关文章链接 10.7路由的params参数注意点1: 跳转路由并携带pa ...
angular路由传递参数_在angular4.0路由传递获取参数的最优方案
这次给大家带来在angular4.0路由传递获取参数的最优方案,在angular4.0路由传递获取参数的注意事项有哪些,下面就是实战案例,一起来看一下. 研究ng4的官网,终于找到了我想要的方法.我想 ...
【Vue路由】多级路由、路由传参、命名路由、params使用
文章目录多级路由案例实验总结路由传参案例实验总结命名路由路由的params参数多级路由案例实验我们尝试做出如下的效果: 首先项目结构: 我们直接看四个路由组件: About.vu ...
【django】路由传递参数
第一种传参: 子路由: from django.urls import pathfrom film import views urlpatterns = [ path('<int:fid> ...
Flask自定义转换器，实现路由匹配正则表达式参数
Flask框架动态路由实现参数传递和Django框架有类似之处,但是相比于Django框架,Flask实现复杂的参数就需要自己自定义转换器来实现了,而不能向Django那样直接使用正则表达式 1 # ...
Vue - 路由传递参数
Vue 2.0 路由传递参数 Vue 路由传递参数有两种方式: 一.用name传递参数两步完成用name传值并显示在模板里: 在路由文件src/router/index.js里配置name属性. ...

路由传递params参数（vue）

文章目录

嵌套路由的实现

模板文件index.html

入口文件main.js

App.vue（App组件）

Header.vue（Header组件）

router/index.js（路由规则文件）

About.vue（About组件）

Home.vue（Home组件）

News.vue（News组件）

Message.vue（Message组件）

路由传递params参数

万事俱备

router/index.js（路由规则文件）

Detail.vue（Detail组件）

Message.vue（Message组件）

东风来了

router/index.js（路由规则文件）

Detail.vue（Detail组件）

Message.vue（Message组件）

路由传递params参数（vue）相关推荐

最新文章

热门文章