vuejs笔记之路由传值的3种方式

责编:menVScode 2017-10-25 22:20 阅读(1286)

vuejs路由传值的三种方式。

1、通过url进行传值,在路由内进行设置;

const router = new Router({
  routes: [
    {path: '/', component: index},
    {path: '/about', component: about},
    {path: '/:mvc', component: about}
  ]
})

获取参数方式:$route.params

const about = {
  template: `<div>
    这里是about页面
    <p>{{ $route.params }}</p>
    <router-link to='about/about001'>about001</router-link>
    <router-view></router-view>
  </div>`
}
// 使用路由插件
Vue.use(Router)
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

地址栏url:http://localhost:8080/#/111;页面输出的结果是:{ "mvc": "111" }。

在函数中打印输出 $route.params;

const App = {
  'template': `<div id="app">
    默认显示的内容
    <!-- 表示模板的地方 -->
    <ul>
      <li><router-link to='/'>index</router-link></li>
      <li><router-link to='/about'>about</router-link></li>
      <li><router-link to='/news/id01'>news</router-link></li>
    </ul>
    <router-view></router-view>
  </div>`
}
const news = Vue.component( 'news', {
	template: '<div>这里是news页面</div>',
	mounted(){
		console.log(this.$route)
	}
})
const router = new Router({
  routes: [
    {path: '/', component: index},
    // 子路由无需再写 ‘/’
    {path: '/:mvc', component: about, children: [{path: 'about001', component: about001}]},
    {path: '/news/:id', component: news }
  ]
})

地址栏url:http://localhost:8080/#/news/id01;打印 this.$route 结果如下:

QQ截图20171026212218


2、通过url进行传值,在<router-link :to='{path:"",query:{}}'></router-link>设置;这种方式将参数直接暴露在地址栏中了。

const App = {
  'template': `<div id="app">
    默认显示的内容
    <!-- 表示模板的地方 -->
    <ul>
      <li><router-link to='/'>index</router-link></li>
      <li><router-link to='/about'>about</router-link></li>
      <li><router-link :to='{path:"/news/id01",query:{name:"menvscode",age:12}}'>news</router-link></li>
    </ul>
    <router-view></router-view>
  </div>`
}

打印 this.$route 结果如下,获取参数 this.$route.query.name ;

QQ截图20171026214510


3、设置<router-link :to='{name:" ",params:{}}'>login</router-link>来获取参数。通过name来找到对应的路由,参数不会显示在地址栏上。

const App = {
  'template': `<div id="app">
    默认显示的内容
    <!-- 表示模板的地方 -->
    <ul>
      <li><router-link to='/'>index</router-link></li>
      <li><router-link to='/about'>about</router-link></li>
      <li><router-link :to='{path:"/news/id01",query:{name:"menvscode",age:12}}'>news</router-link></li>
      <li><router-link :to='{name:"login",params:{name:"menvscode",pwd:456}}'>login</router-link></li>
    </ul>
    <router-view></router-view>
  </div>`
}
const router = new Router({
  routes: [
    {path: '/', component: index},
    {path: '/login', name:'login', component: login },
    {path: '/:mvc', component: about, children: [{path: 'about001', component: about001}]},
    {path: '/news/:id', component: news }
  ]
})

通过 this.$route.params 来获取参数对象,this.$route.params.name


完整代码:

import Vue from 'vue'
// 引入文件的路劲没有 ./ 或者 / ,那么直接是找node_modules目录下的文件
import Router from 'vue-router'

const App = {
  'template': `<div id="app">
    默认显示的内容
    <!-- 表示模板的地方 -->
    <ul>
      <li><router-link to='/'>index</router-link></li>
      <li><router-link to='/about'>about</router-link></li>
      <li><router-link :to='{path:"/news/id01",query:{name:"menvscode",age:12}}'>news</router-link></li>
      <li><router-link :to='{name:"login",params:{name:"menvscode",pwd:"456"}}'>login</router-link></li>
    </ul>
    <router-view></router-view>
  </div>`
}

// 可以直接{},也可以Vue.component{},根元素只能有一个
const index = {
  template: `<div>这里是index</div>`
}

const about = {
  template: `<div>
    这里是about页面
    <p>{{ $route.params }}</p>
    <router-link to='about/about001'>about001</router-link>
    <router-view></router-view>
  </div>`
}

const about001 = {
  template: `<div>about001</div>`
}

const news = Vue.component( 'news', {
	template: '<div>这里是news页面</div>',
	mounted(){
		console.log(this.$route)
	}
})

const login = Vue.component( 'login', {
	template: '<div>这里是login页面</div>',
	mounted(){
		console.log(this.$route)
	}
})
// 跟路由显示的地方是第一个 router-view 的标签里
// 子路由显示的地方是父级路由模板里的第一个 router-view 的标签里
const router = new Router({
  routes: [
    {path: '/', component: index},
    // 子路由无需再写 ‘/’
    {path: '/login', name:'login', component: login },
    {path: '/:mvc', component: about, children: [{path: 'about001', component: about001}]},
	{path: '/news/:id', component: news }
  ]
})

// 使用路由插件
Vue.use(Router)
Vue.config.productionTip = false
new Vue({
  el: '#app', 
  router,
  template: '<App/>',
  components: { App }
})


标签: 路由 vuejs
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码