vue-router頁面跳轉 以及頁面配置

昨天本身在家作了一個前端上線系統，使用到的技術有VUE框架，element-ui, vue-router
傳送門：https://github.com/liyang1234...
頁面效果以下：

其中的router的使用方法和一些配置文件 webpack入口文件main.js,router的index.js內容以下：

使用router

官方例子

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 組件來導航. -->
        <!-- 經過傳入 `to` 屬性指定連接. -->
        <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的組件將渲染在這裏 -->
    <router-view></router-view>
</div>

• router-link標籤：跳轉的連接，to=""是必須的屬性，雙引號中的內容是咱們接下來在JS文件中定義的路由path。
• router-view標籤：展現咱們匹配到的組件的區域

router-link的一些屬性

//to屬性 string|object
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染結果 -->
<a href="home">Home</a>
 
<!-- 使用 v-bind 的 JS 表達式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
 
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
 
<!-- 帶查詢參數，下面的結果爲 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
 
//replace屬性 true|false 不留下 history 記錄。
<router-link to="home" replace>Home</router-link>
 
//append屬性 true|false 追加路徑
<router-link to="home" append >Home</router-link>
 
//tag屬性 string 設置渲染標籤
<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染結果 -->
<li>foo</li>
 
//active-class 屬性 string 激活時使用的 CSS 類名

    // 0. 若是使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)
     
    // 1. 定義（路由）組件。
    // 也能夠從其餘文件 import 進來
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }
     
    // 2. 定義路由
    // 每一個路由應該映射一個組件。 其中"component" 能夠是
    // 經過 Vue.extend() 建立的組件構造器，
    // 或者，只是一個組件配置對象。
    const routes = [
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar }
    ]
     
    // 3. 建立 router 實例，而後傳 `routes` 配置
    // 你還能夠傳別的配置參數, 不過先這麼簡單着吧。
    const router = new VueRouter({
        routes // （縮寫）至關於 routes: routes
    })
     
    // 4. 建立和掛載根實例。
    // 記得要經過 router 配置參數注入路由，
    // 從而讓整個應用都有路由功能
    const app = new Vue({
        router
    }).$mount('#app')
     
    // 如今，應用已經啓動了！

JavaScript文件主要作的事情是：
定義路由列表，即routes。建立router實例及router配置，即router。建立和掛載根實例。
以上只是教咱們用最簡單的方法使用vue-router。但實際開發過程當中，首先咱們的vue組件顯然不會只有一個template模板這麼簡單，會用到vue的單文件組件；
其次咱們一般會但願<router-view>的範圍是整個頁面，而不是像如今這樣一直有幾個礙眼的導航存在於頁面上，這就須要先定義好默認狀態下<router-view>顯示的內容。

既然是單頁應用（SPA），那麼整個項目有如下三個文件是必要的:
一個html文件：index.html
一個webpack打包時的入口js文件：main.js
一個根vue組件，做爲其餘組件的掛載點：app.vue

用vue-cli生成webpack打包的vue項目

npm install webpack -g
npm install vue-cli -g
//打開要建立的項目路徑目錄，建立項目
vue init webpack-simple <項目名>
cd <項目名>
npm install vue-router --save
npm run dev

生成的項目相似這樣的：

在components下面新建兩個vue文件 index.vue和hello.vue

//index.vue
<template>
 <div>
     <h2>Index</h2>
     <hr>
     <p>{{sContent}}</p>
 </div>
</template>
<script>
 export default{
     data(){
         return {
             sContent:"This is index components"
         }
     }
 }
</script>

//hello.vue
<template>
 <div>
     <h2>Hello Vue.js</h2>
     <hr/>
     <p>{{sContent}}</p>
 </div>
</template>
<script>
 export default{
     data(){
         return {
             sContent:"This is hello components"
         }
     }
 }
</script>

修改main.js文件

//引入並安裝vue-router插件
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//引入index.vue和hello.vue組件
import App from './App.vue';
import index from './components/index.vue';
import hello from './components/hello.vue';
//定義路由
const routes = [
 {path:'/',component:App},
 { path: '/index', component: index },
 { path: '/hello', component: hello }
]
//建立 router 實例，而後傳 routes 配置
const router=new VueRouter({
routes
});
//建立和掛載根實例。經過 router 配置參數注入路由，從而讓整個應用都有路由功能
new Vue({
el:"#app",
router
});

修改App.vue

<template>
<div>
 ![](./assets/logo.png)
 <h1>{{msg}}</h1>
 <ul>
   <router-link to='/index' tag='li'><a href="/index">Index</a></router-link>
   <router-link to='/hello' tag='li'><a href="/hello">Hello</a></router-link>
 </ul>
</div>
</template>

修改index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>vue-webpack-simple</title>
</head>
<body>
 <div id="app">
     <router-view></router-view>
 </div>
 <script src="/dist/build.js"></script>
</body>
</html>

運行效果以下：