vuejs笔记之路由传值总结

责编:menVScode 2017-11-03 17:12 阅读(1098)

1、一个『路径参数』使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用。

import Vue from 'vue'
import Router from 'vue-router'
import Test from '@/components/Test'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    {
      path:'/:params',
      component:Test
    }
  ]
})

可以通过 $route.params 方式直接写在模板中,也可以通过 this.$route.params 在函数方法中运用。

<template>
	<div class='test'>
		<h3>测试</h3>
        <p>{{$route.params}}</p>
		<p @click="getParams">控制台打印$route.params</p>
	</div>
</template>
<script>
	export default {
		methods:{
			getParams(){
				console.log(this.$route.params);
			}
		}
	}
</script>


2、通过 :to={ } 绑定,内部用 query:{ } 来实现传递参数,<li><router-link :to='{path:"/test",query:{name:"menvscode.com",age:1}}'>测试</router-link></li>,点击此链接浏览器地址直接暴露出参数信息:localhost:8081/#/test?name=menvscode.com&age=1。

<template>
	<div class="header">
		<ul>
			<li><router-link to="/">首页</router-link></li>
			<li><router-link to="/news">新闻</router-link></li>
			<li><router-link to="/job">工作</router-link></li>
			<li><router-link :to='{path:"/test",query:{name:"menvscode.com",age:1}}'>测试</router-link></li>
		</ul>
	</div>	
</template>

可以通过 $route.query 方式直接写在模板中,也可以通过 this.$route.query 在函数方法中运用。

<template>
	<div class='test'>
		<h3>测试</h3>
        <p>{{$route.query}}</p>
		<p @click="getQuery">控制台打印$route.params</p>
	</div>
</template>
<script>
	export default {
		methods:{
			getQuery(){
				console.log(this.$route.query);
			}
		}
	}
</script>


3、通过 :to={ } 绑定,内部用 query:{ } 来实现传递参数,匹配路由的时候用name,不能再用path匹配。<li><router-link :to='{name:"test",params:{name:"menvscode.com",age:1}}'>测试</router-link></li>,此种方式参数信息不会暴露在地址栏上。

<template>
	<div class="header">
		<ul>
			<li><router-link to="/">首页</router-link></li>
			<li><router-link to="/news">新闻</router-link></li>
			<li><router-link to="/job">工作</router-link></li>
			<li><router-link :to='{name:"test",params:{name:"menvscode.com",age:1}}'>测试</router-link></li>
		</ul>
	</div>	
</template>

通过 :to={ } 绑定的时候,谨记路由匹配的时候,要用name去匹配(命名路由)。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Test from '@/components/Test'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',name: 'Home', component: Home
    },
    {
      name:'test',
      path:'/test',
      component:Test
    }
  ]
})

可以通过 $route.params 方式直接写在模板中,也可以通过 this.$route.params 在函数方法中运用。

<template>
	<div class='test'>
		<h3>测试</h3>
        <p>{{$route.params}}</p>
		<p @click="getParams">控制台打印$route.params</p>
	</div>
</template>
<script>
	export default {
		methods:{
			getParams(){
				console.log(this.$route.params);
			}
		}
	}
</script>
标签: 路由 vuejs
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码