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, 和上面的结构一致