vue-router 路由组件传参

矫情吗；* 2021-09-15 03:04 461阅读 0赞

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

[vue-router]: https://blog.csdn.net/gao_xu_520/article/details/79727982