记录 vscode 中配置Vue-router 过程

Vue-router 是单页面应用必不可少的工具掌握Vue-router 的用法也是不可避免

首先在项目中导入 Vue-router 可以使用npm 命令

npm install vue-router --save

• 如果这里安装失败了 可以检查权限或指定安装版本 因为如果Vue 版本较低 直接安装较高版本的路由是不支持的可以切换低版本的Vue-router

安装成功之后就是具体使用了

在src 目录下新建 router 文件夹 并新建文件router.js

  // 导入 vue 以及 Vue-router
  import Vue from "vue";
  import VueRouter from "vue-router";

  // 引入我需要显示的组建
  import onepage from '../components/ContactTest01.vue'
  import twopage from '../components/ContactTest02.vue'
  import threepage from '../components/onePage.vue'
  import fourpage from '../components/twoPage.vue'
  
  // 声明在Vue 中使用的插件
  Vue.use(VueRouter)
  
  // 开始配置路由
  const routes = [{
          path: "",
          // 路由重定向 首次进入默认加载
          redirect: '/one'
      },
      {
          path: '/one',
          component: onepage
      },
      {
          path: '/two',
          component: twopage
      },
      {
          path: '/three',
          component: threepage
      },
      {
          path: '/fours',
          component: fourpage
      }
];

// Vue路由默认使用hash模式.
const router = new VueRouter({
   routes,
   // 切换路由默认样式 hash history
   mode: "history",
   // 给路由配置选中状态
   linkActiveClass: "active",
   linkExactActiveClass: "active"
})
  
//导出
export default router
  

在main.js 中注册router.js

import router from './router/router.js'



new Vue({
   router,
   render: h => h(App),
}).$mount('#app')

（ 这里有一点需要注意 当时路由配置完了 一直报错说找不到 router 找了半天 不知道咋回事 后台就是把这里的router 改成导出的router 名字改为一致就可以了 还不知道是为啥 以后知道了来更新... ）

在 app.vue中 引入我们的路由

<div>
   <router-view></router-view>
</div>
   <ul>
       <li>
           <router-link to="/one" class="active">首页</router-link>
       </li>
       <li>
           <router-link to="/two" class="active">内容</router-link>
       </li>
       <li>
           <router-link to="/three" class="active">购物车</router-link>
       </li>
       <li>
           <router-link to="/fours" class="active">我的</router-link>
       </li>
   </ul>

• 到这就可以了