router/index.js 各种问题

router/index.js 各种问题

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 在项目中路由跳转
跳转页面必须有 router-view标签
如果跳转也买的只是中间的部分内容（heard foot 不改变body 改变 需div包裹起来如下）
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>