vue-router的安装和使用

第一种方式（简单）：新建项目时用 vue-cli 手动选择 router 安装。

1、用键盘 ↓ 移动选择第三项“ Manually select features”（手动配置）；

2、选中 Babel 和 Router （按空格 选中/取消）；

 

3、后三项选择默认也可，选择图中所示也可；

　　a)Use history mode for router? 是否在router中用 history 模式？

　　　　router 有 history 模式和 hash 模式，hash 模式下 url 里有#，如 https://cn.vuejs.org/v2/guide/components.html#%E5%9F%BA%E6%9C%AC%E7%A4%BA%E4%BE%8B

　　b)Where do you prefer placing config for Babel、ESLint, etc.? 把配置文件放在哪里？

　　c）Save this as a preser for future projects? 是否保存这个配置为以后的工程配置？

 

 4、进入项目目录，运行项目；

 

5、点击 Home 或者 About 可以切换页面 。

 

demo项目目录如下：

---

 第二种方式：在项目路径下安装 vue-router、手动配置文件

用vue-cli新建项目，选择默认。demo2目录如下：

此时的 package.json中没有依赖 vue-router：

 1、进入项目路径，安装 vue-router：   npm install vue-router@3.5.2 

 

2、vue-router 安装完成后，package.json中自动添加 vue-router 的依赖：

 

3、在src下新建 router 文件夹，在 router 文件夹中新建 index.js。配置index.js：

//在js中引入 Vue 和 VueRouter；
import Vue from 'vue'
import VueRouter from 'vue-router'
//使用 VueRouter；
Vue.use(VueRouter)
//配置 router；
const routes = [ ];
const router = ({
　　routes,
　　mode:'history'
})
//导出router；
export default router

4、配置main.js

import Vue from 'vue'
import App from './App.vue'
//添加这一行
import router from './router'

Vue.config.productionTip = false

new Vue({
//添加这一行
  router,
  render: h => h(App)
}).$mount('#app')

 5、在App.vue中使用路由

 <template>
   <div id="app">
     <!--这里显示路由的标题-->
       <router-link to="/">Home</router-link> |
     <router-link to="/about">About</router-link>
    <!--router-view 用来占位，在router-view中展示选择的页面内容-->
      <router-view/>
  </div>
</template>

6、在项目路径下执行 npm run serve 即可运行项目。