vue-router 路由组件传参

1.最简单的用 name传参$route.name 输出的是当前路由，不过这个一般不用1.在路由文件router/index.js里配置name属性。routes: [{path: '/',name: 'Hello',component: Hello}]2.模板里(src/App.vue)用$router.name...

面条请不要欺负汉堡

6500人浏览 · 2018-03-28 17:34:27

面条请不要欺负汉堡 · 2018-03-28 17:34:27 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^