vue路由怎么传参router-link传参
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue路由怎么传参router-link传参相关的知识，希望对你有一定的参考价值。
参考技术A一个简单的小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script src="./vue-router.min.js"></script>
</head>
<body>
<div id="app">
<!--to 表示要跳到哪个url里面-->
<router-link to="/cici">Cici</router-link>
<router-link to="/0725">0725</router-link>
<!-- 这里不需要写-->
<router-view></router-view>
</div>
</body>
</html>
<script>
//路由的作用就是切换页面的跳转
//这里是没有s的
// var cici = Vue.extend(
// template: '<div>CICI板块</div>'
// )
// var C0725 = Vue.extend(
// template: '<div>0725板块</div>'
// )
// 可以简写成这个样
var cici =
template: '<div>CICI板块</div>'
var C0725 =
template: '<div>0725板块</div>'
//创建路由,注册好配置,和跳转
var router = new VueRouter(
routes: [
path: '/cici',
component: cici //传入的是一个对象
,
path: '/0725',
component: C0725 //传入的是一个对象
]
)
var vm = new Vue(
el: "#app",
router: router
)
</script>
VUE—路由拓展（导航传参）
参考技术A 通过导航<router-link></router-link>加载组件时，将数据传递给组件，传递参数的方法有 query 和 params 两种query传参分为 path传参 和 name传参 ，会将数据拼接到 路径 上，刷新后数据 不会丢失
params传参也可以分为 path传参 和 name传参。 当使用path传参时，与name传参的格式不同，但是，两种传参方式都 不会将数据拼接到路径上 ，刷新之后， 数据丢失 。
当我们想使用params传参但是有不想刷新之后数据丢失，这个时候，就需要在路由中配置props，
当然，在使用props之后，获取数据展示的写法也可以这样写
以上是关于vue路由怎么传参router-link传参的主要内容，如果未能解决你的问题，请参考以下文章