【vue】路由组件

安装vue-router

• 安装依赖

  npm install vue-router@3.5.2 --save

• 在main.js中引入

  import router from '@/router';

• 新建一个router文件夹，新建index.js

  import Vue from 'vue';
  import VueRouter from 'vue-router';
  
  Vue.use(VueRouter);
  
  export default new VueRouter ({
      //配置路由
      routes:[
          {
              path: 路径名
              component: 组件名
          },
          
      ]
  })

隐藏路由组件

在某些页面中如果想要隐藏Header组件或Footer组件，可以设置meta

router.js

export default new VueRouter ({
    //配置路由
    routes:[
        {
            path: "/home",
            component: Home,
            meta: {show:true}
        },
        {
            path: "/login",
            component: Login,
            meta: {show:false}
        },
        {
            path: "/register",
            component: Register,
            meta: {show:false}
        }
    ]
})

<Footer v-show="$route.meta.show"></Footer>

路由跳转

1. 声明式导航router-link

   <router-link to="/login">登录</router-link>

2. 编程式导航push | replace

   <button @click="goSearch">搜索</button>

   methods: {
         goSearch() {
           this.$router.push('/search');
         }
       }

路由传参

在编程式导航中可以进行路由传参

1. 字符串形式

   {// 修改路由信息
       path: "/search/:keywords",
       component: Search,
       meta: {show:true}
   },

   //编程式导航
   this.$router.push('/search/'+this.keywords+"?k="+this.keywords.toUpperCase());

   url地址：http://localhost:8081/#/search/1a2q?k=1A2Q

   其中params参数为1a2q，query参数为1A2Q

   可以通过$route.params.keywords 和 $route.query.k获取

2. 模板字符串

   this.$router.push(`/search/${this.keywords}?k=${this.keywords.toUpperCase()}`);

3. 对象

   this.$router.push({
               name:"search",
               params: {keywords:this.keywords},
               query:{k:this.keywords.toUpperCase()}
           })