vue-10-路由

1 原始方式

1), 路由, vue-router 2

簡單安裝方式, 但先講原理

cnpm install --save vue-router

2), 引用

在main.js中

// 引入 router
import VueRouter from "vue-router"
Vue.use(VueRouter)

3), 注入: 

import VueRouter from "vue-router"

import HelloWorld from './components/HelloWorld'

Vue.use(VueRouter)

var router = new VueRouter({
  routes: [{
    path: "/hello",
    component: HelloWorld
  }]
})

在 vue 中注入: 

new Vue({
  el: '#app',
  components: {App},
  template: '<App/>',
  router
})

4), 視圖加載位置

在app.vue中

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>

    <router-view></router-view>

  </div>
</template>

經過  http://localhost:8080/#/hello 的方式訪問

2,  但這樣使用太亂了, 因此將路由單獨提出來: 

新建 router 目錄, 在下面新建 index.js 文件

import Vue from 'vue'

// 引入 router
import VueRouter from "vue-router"

import HelloWorld from '../components/HelloWorld'
import HellowIwen from '../components/HellowIwen'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [{
    path: "/hello",
    component: HelloWorld
  }, {
    path: "/iwen",
    component: HellowIwen
  }]
})

main.js抽取邏輯後變爲 ;

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

// 引入 默認加載 index.js
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: {App},
  template: '<App/>',
  router
})

肯定加載位置: , 在 app.vue 中

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>

    <router-view></router-view>

  </div>
</template>

3, 跳轉 

1), 新建 navelist .vue, 使用 router-link 標籤進行跳轉

<template>
  <div>
    <!--用來跳轉的-->
    <ul>
      <li>
        <!--使用基本的 to-->
        <router-link to="/hello">hello world</router-link>
      </li>

      <li>
        <router-link to="/iwen">hello iwen</router-link>
      </li>
    </ul>

    <ul>
      <li>
        <!--v-bind:to  動態數據加載-->
        <router-link :to="urlData.helloworld">hello world</router-link>
      </li>
    </ul>

    <ul>
      <li>
        <!-- 使用 path -->
        <router-link :to="{path: urlData.helloworld}">hello world</router-link>
      </li>
    </ul>

  </div>
</template>

<script>
  export default {
    name: "NavList",
    data() {
      return {
        urlData: {
          helloworld: "/hello",
          helloIwen: "/iewn"
        }
      }
    }
  }
</script>

<style scoped>
  ul {
    list-style: none;
    text-align: center;
  }
  li {
    color: red
  }
</style>

當點擊時, 經過 router-link 標籤解攜爲 a 標籤, 進行葉面間跳轉

 

能夠在進行 vue init webpack router-example 的時候, 直接建立router, 和上面的結構一致