路由使用0,0

路由:一个地址指向对应一个组件

router:路由的实例化对象,管理整个路由

route:提供当前路由的基本信息

  路由安装

1:安装   yarn add vue-router或者npm i vue-router
2:导入
    src/router/index.js
    import VueRouter from 'vue-router'
3:注册
   import Vue from 'vue'
   Vue.use(VueRouter)
4:实例化
  const router=new VueRouter({
      routes:[
          {
              path:'/',
              components:{
                  default:组件,    router-view  name='default'
                  其它名字:组件      router-view name='其它名字'
              }，
              alias:别名(/home)
              meta:路由元
              redirect:重定向，
              children....
          }
      ]
  })
 5:暴露出去

    export default router
 6:挂载
   import router from '@/router'
   new Vue({
       router
   })
  7:路由出口
     <router-view></router-view>

基本路由传参

 传值

                this.$router.push("/path地址?参数名=值&参数2=值2")

                this.$router.push({

                        path:'/path地址'

                        query:{

                                参数名:值}                

                })

收值

this.$router..query.参数名

动态路由传参

路由配置{

                path:'/xxx/:参数名?',//?代表参数值可传可不传

}

 传值

                this.$router.push("/xxx/123")

收值

this.$router.params.参数名

name传参

• 路由配制

  • {
        path:'/',
        name:'home',
        ....
    }

• 传：（刷新不受影响）

  • this.$router.push({name:'home',query:{参数名：参数值}})---和以前基本路由传参一样

• 收：

  • this.$route.query.参数名

• 传（params）：刷新后传参就没了，数据长度与数据类型不受限制

  • this.$router.push({name:'home',params:{参数名：参数值}})---和以前基本路由传参一样

• 收(params)

  • this.$route.params.参数名