ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

router/index.js 各种问题

2021-09-07 13:58:46  阅读:38  来源: 互联网

标签:index resolve -- component js path router Router


1router/index.js
配置二级路由
二级目录是 children 不是 child

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    // {
    //   path: '/',
    //   name: 'HelloWorld',
    //   component: HelloWorld,
    //   child:[
    //   ]
    // },
    {
          path: '/standard',
          name: 'standard',
          component: resolve => require(['@/pages/template/standard'], resolve),
          children: [
            {
              path: 'a',
              component: resolve => require(['@/pages/practice/a'], resolve),
            },
            {
              path: 'b',
              component: resolve => require(['@/pages/practice/b'], resolve),
            },
            {
              path: 'c',
              component: resolve => require(['@/pages/practice/c'], resolve),
            },
          ]
        },
  ]
})

2 去除#
history模式去除#(根据项目特殊要求,分享项目连接 ,部分APP 不支持#连接)
hash模式是项目默认模式
是浏览器 的两种模式

const router = new Router({
  routes,
  base:'/',
  mode: 'history',
  //但history模式打包后出现页面一片空白的情况,而且没有资源加载错误的报错信息.
});

3 去除#之后router 失效 空白页
base:’/’, 修改项目目录在(不同项目指定的目录不同)

const router = new Router({
  routes,
  base:'/',
  mode: 'history',
  //但history模式打包后出现页面一片空白的情况,而且没有资源加载错误的报错信息.
});

4 在项目中路由跳转
跳转页面必须有
如果跳转也买的只是中间的部分内容(heard foot 不改变body 改变 需div包裹起来如下)

  <div class="standard">
    <div>
      <div class="tab">
        <!-- <router-link to="/standard/a"> -->
          <div class="children" @click='hand("/standard/a")'>我是a组件</div>
        <!-- </router-link> -->
        <!-- <router-link to="/standard/b"> -->
          <div class="children" @click='hand("/standard/b")'>我是b组件</div>
        <!-- </router-link> -->
        <!-- <router-link to="/standard/c"> -->
          <div class="children" @click='hand("/standard/c")'>我是c组件</div>
        <!-- </router-link> -->
      </div>
      <router-view />
    </div>
  </div>

标签:index,resolve,--,component,js,path,router,Router
来源: https://blog.csdn.net/qq_28134589/article/details/120156371

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有