vue学习笔记router传参

   go(){
      // 带参数跳转
      this.$router.push({
        path:’/p2′,  需要跳转到的路劲
        query:{  // 跳转时携带的query数据
          name:’首页’,
          age:’18’,
          sex:’女’,
        }
      })
    },

{{$route.query}}

{{$route.query.name}}

import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
  const routes = [
  {
    path: ‘/’,
    name: ‘Home’,
    component:() => import(‘../components/Home’),
    // 创建Home的子路由。 children
    children:[
      // {
      //   path:”,
      //   // 进入路由后默认的跳转链接 redirect 重定向
      //   redirect:’p1′
      // },
      {
        path:’p1′,// 不需要加/
        component:()=>import(‘../components/Homep1’)
      },
      // vue动态路由传参，需要三个步骤，
      // 1.首先在router-link中这样定义  <router-link :to=”‘/p2/’+msg”> p2</router-link>
      // 2.然后需要在路由中设置动态路由，因为传递的参数是不确定的，所以必须要动态路由。   path:’p2/:msg’,
      // 3.接着的话就可以到指定的vue文件中用 $route 表示当前正在引用的路由地址。 $route.params.msg  这里的msg命名必须要和动态路由定义的一致
      // 第二种传值方式，通过自定义router-link 的属性来传递，
      // 1.首先在router-link中绑定v-bind:to=”{path:’/path’,query:{绑定的是一个对象}}”  这里的path不能够省略，query命名不能变化
      // 2.接着在.vue文件中直接通过 {{$route.query}}  就可以获取到通过url传递过来的值了。
      // 3.这种方法不需要在路由中绑定动态路由来传递  因为不是用的 $route.params  方法来获取的。
      {
        path:’p2′,// 不需要加/
        component:()=>import(‘../components/Homep2’)  路由懒加载写法
      }
    ]
  },
  {
    path: ‘/user/:userid’,
    name: ‘User’,
    component:() => import(‘../components/User’)
  },
]
const router = new VueRouter({
  mode: ‘history’,   //  如果打包的时候出现router不能正常使用，把这里注释掉或者改成hash就好了
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to,from,next)=>{
  // 为了保证每次获取到的都是准确的标题，所以需要虚matched中的第一个参数的meta中的标题，
  // 也就是在路由中meta中定义的title
  document.title=to.matched[0].meta.title
  console.log(to); // 输出to查看一下就很清楚了
    // 其中next必须要调用，不然路由不会跳转。
  next()
})
export default router