vue 问题记录

1. 在后台response.sendRirdect(),redirect跳转时千万不能用ajax, $axios这种方式不会跳转成功，一定要通过form或<a>的把后台地址写在html上.

2. 不同path引用同一个组件切换不刷新问题

onst routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        component: () => import('layouts/IndexLayout.vue'),
        children: [
          { path: '', component: () => import('pages/Index.vue') },
          { path: 'rank', component: () => import('pages/Index.vue') },
          { path: 'cheap', component: () => import('pages/Index.vue') },
        ],
      },
      {
        path: '/item/:id',
        name: 'detail',
        component: () => import('pages/DetailPage.vue'),
        props: true,
        // 在router之间传递参数用下面配置
        // props: (route) => ({ title: route.query.title, detail: route.query.detail }),
      },
    ],
  },

   <q-tabs
      class="bg-secondary border q-my-xs"
      v-model="selectedTab"
      style="font-size: 16px"
      align="left"
    >
      <q-route-tab to="/" label="首页" name="main" />
      <q-route-tab to="/cheap" label="白菜" name="cheap" />
      <q-route-tab to="/rank" label="排行榜" name="rank" />
    </q-tabs>
　　

　　　　<q-page-container>

　　　　　　<router-view :key="$route.path"></router-view>

　　　　</q-page-container>

这里每个tab页跳转的页面都是Index.vue,不过不在router-view加上key，则切换tab不会重新请求。还有一种做法

beforeRouteUpdate(to, from, next) 
　　{console.log(to, from);
　　next();
},

3. vue-router在动态路径上参数不匹配，页面可以到指定路径，但地址栏上的地址却没变（从www.hjdang.com 到www.hjdang.com/detail/xxxxxx）

            <router-link
              :to="{
                path: 'item',
                name: 'detail',
                params: { code: item.urlCode },
              }"
              >...阅读全文
            </router-link>

router.js

      {
        path: 'item',
        component: () => import('layouts/DetailLayout.vue'),
        // props: true,
        beforeEnter: (to, from, next) => {
          console.info('##before enter DetailLayout, to=' + to.fullPath);
          next();
        },
        children: [
          {
            name: 'detail',
            path: 'detail/:id',
            component: () => import('pages/DetailPage.vue'),
            props: true,
            // beforeEnter: (to, from, next) => {
            //   console.info('%%before enter DetailPage, to=' + to.fullPath);
            //   next();
            // },
ht          },
        ],
        // 在router之间传递参数用下面配置
        // props: (route) => ({ title: route.query.title, detail: route.query.detail }),
      },

注意这里参数在router.js中配的是id，但传过来的是code，这种情况页面是跳到了指定的页面，但地址栏上却还是显示www.hjdang.com. (其实单页面应用都只在一个index.html上运行，而history模式可以改变url而不刷新页面，这里是不是没有找到完成匹配的路由所以导致url没改变，但却运行了脚本导致页面改变？）