vue-router 路由

官網

https://router.vuejs.org/zh/

千萬注意，項目名稱不能是 vue-router ，否則路由安裝是會報錯的；
報錯信息如下：

npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "vue-router" under a package
npm ERR! also called "vue-router". Did you name your project the same
npm ERR! as the dependency you're installing?
npm ERR!
npm ERR! For more information, see:
npm ERR!     <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm>

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2019-06-04T00_10_17_081Z-debug.log

# 翻譯
npm犯錯!代碼ENOSELF
npm犯錯!拒絕在軟件包下安裝名爲“vue-router”的軟件包
npm犯錯!也稱爲“vue-router”。你給你的項目取了同樣的名字嗎
npm犯錯!作爲您正在安裝的依賴項?
npm犯錯!
npm犯錯!有關更多信息，請參見:
npm犯錯!< https://docs.npmjs.com/cli/install limitations-of-npms-install-algorithm > ? ?
npm犯錯!完整的運行日誌可在以下文件中找到:
npm犯錯!? ? C:\Users\管理員\ AppData \漫遊\ npm-cache \ _logs \ 2019 - 06 - 04 - t00_10_17_081z debug.log

這個錯誤出現的原因就是我們的項目名和路由插件重名了，所以創建的時候，項目名不要用 vue-router

步驟

1. 創建項目

# 創建項目
vue create router-demo
# cd 到項目目錄
cd router-demo
# 啓動項目 
npm run serve
# less
npm i less-loader
npm i less -D

2. 創建文件

src/router/index.js

3. 安裝路由

npm i vue-router

4. vue-router 實際上是 vue的一個插件，所以要通過 Vue.use() 明確地安裝路由功能：

【src/router/index.js】

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

【main.js】
import router from './router/index'

5. 配置路由

【src/router/index.js】
import Vue from 'vue';
import VueRouter from 'vue-router';

// 導入組件
import Home from '../views/Home.vue';
import Login from '../views/Login.vue';
import News from '../views/News.vue';
import Not from '../views/Not.vue';

// 安裝插件
Vue.use(VueRouter);

// new 一個路由對象，然後暴露出去，在 main.js頁面將這個對象導入，放到 vue實例中；
export default new VueRouter({
    mode: 'history', // hash & history
    routes: [
        {
            path: '/',			// 路徑
            component: Home		// 組件
        },
        {
            path: '/login.gx',
            component: Login
        },
        {
            path: '/news.gx',
            component: News
        },
        {
            path: '/404.gx',
            component: Not
        },
        // 404 放在最後； * 匹配任意路徑
        // 路由是從上往下匹配，如果匹配到上邊的路由就是用上邊的，如果上邊的全部匹配不到，就是用這一個，所以這個要放在最底下；
        {
            path: '*',
            // component: Not
            // 重定向 到 404頁面
            redirect: '/404.gx'
        }
    ]
})

【main.js】

import router from './router/index'

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

<!-- 使用 router-link 組件來導航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
<router-link to="/">Home</router-link>
<router-link to="/login.gx">Login</router-link>
<router-link to="/news.gx">News</router-link>

<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這裏 -->
<router-view></router-view>