Vue-router路由组件传参
【摘要】 1.最简单的用 name传参$route.name 输出的是当前路由 ，不过这个一般不用1.在路由文件router/index.js里配置name属性。routes: [ { path: '/', name: 'Hello', component: Hello }]2.模板里(src/App.vue)用$router.name的形势接收，比如直接在...
1.最简单的用 name传参
$route.name 输出的是当前路由 ，不过这个一般不用
1.在路由文件router/index.js里配置name属性。
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
2.模板里(src/App.vue)用$router.name的形势接收，比如直接在模板中显示：
<p>{{ $route.name}}</p>2.使用vuex 状态管理 this.$store.state.count 获取数据
其实就是把值存在store，然后在去取store的值
1.在文件store/store.js里定义变量
const state = {
count:3
}
export default new Vuex.Store({
state,
actions,
modules,
getters,
mutations
})
2.模板里(src/App.vue)用的this.$store.state.count形势接收，比如直接在模板中显示：
<template>
<div>
<h4>测试1：Count is {{count}}</h4>
</div>
</template>
<script>
export default {
computed:{
count(){
return this.$store.state.count
}
}
}
</script>3.通过<router-link> 标签中的to传参
<router-link
:to="{
path: 'yourPath',
params: {
name: 'name',
dataObj: data
},
query: {
name: 'name',
dataObj: data
}
}">
</router-link>
1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航
2. params -> 是要传送的参数,参数可以直接key:value形式传递
3. query -> 是通过 url 来传递参数的同样是key:value形式传递
// 2,3两点皆可传递在子组件中获取this.$route.query.name
4.$router方式跳转
(1).$route.params.id获取路由上的参数
如新闻列表页，我们需要传递新闻ID，给新闻详细页。
1.新闻列表页:<router-link to="/news/001">新闻001</router-link>
我们访问/news/001，跳转到新闻详细页，展示001的这条新闻。
2.新闻详细页组件准备
<template id="NewsDetail">
新闻详细页面<span>{{$route.params.id}}</span>
</template>
$route.params.id获取路由上的参数
在js里定义路由组件：
const NewsDetail = { template: '#NewsDetail' };//新闻详细页组件
3.定义路由，增加一个路由
{ path: '/news/:id', component: NewsDetail },
如demo 所示
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="box">
<p>
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
</p>
<router-view></router-view>
</div>
<!-- 模板抽离出来 -->
<template id="home">
<!-- 注意：组件只能有一个根元素，所以我们包装到这个div中 -->
<div>
<h2>首页</h2>
<router-link to="/home/login">登录</router-link>
<router-link to="/home/reg">注册</router-link>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
<template id="news">
<div>
<h2>新闻列表</h2>
<ul>
<li>
<router-link to="/news/001">新闻001</router-link>
</li>
<li>
<router-link to="/news/002">新闻002</router-link>
</li>
</ul>
</div>
</template>
<template id="login">
<div>登录界面</div>
</template>
<template id="reg">
<div>注册界面</div>
</template>
<template id="NewsDetail">
<div>
新闻详细页面
<span>{{$route.params.id}}</span>
</div>
</template>
<script type="text/javascript">
// 1. 定义（路由）组件。
const Home = { template: '#home' };
const News = { template: '#news' };
const Login = { template: '#login' };
const Reg = { template: '#reg' };
//新闻详细页组件
const NewsDetail = { template: '#NewsDetail' };
// 2. 定义路由
const routes = [
{ path: '/', redirect: '/home' },
{
path: '/home',
component: Home,
children:[
{ path: '/home/login', component: Login},
{ path: '/home/reg', component: Reg}
]
},
{ path: '/news', component: News,},
{ path: '/news/:id', component: NewsDetail },
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#box')
// 现在，应用已经启动了！
</script>
</body>
</html>此例子也可以参考：vue-router 基本语法 中vue项目中路由配置小案例 传参
5.<router-view>属性携带数据
注意：只针对相连的子组件
父组件：
<router-link to="/message">新闻资讯</router-link>
<router-view :msg="msg"></router-view>
export default {
data () {
return {
msg:"router-view传递"
}
},
}
</script>
子组件：message.vue
<h1>{{msg}}</h1>
export default {
//要先声明接受属性，
props:["msg"]
}
</script>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）