vue-router 路由组件传参-蒲公英云

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.通过标签中的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.新闻列表页:新闻001

我们访问/news/001，跳转到新闻详细页，展示001的这条新闻。

2.新闻详细页组件准备

$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-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>