Vue 路由

1 关键部分

1） map：什么地址访问什么样的页面。 2） router-view ： 什么位置显示指定页面或组件。3）router-link 在页面中如何跳转到指定页面。

 

2 使用步骤

1） 安装路由

cnpm install vue-router --save

 

2) 将路由插件引入项目中，修改 main.js 文件

import VRouter from 'vue-router'

Vue.use(VRouter);

3） 配置路由表，访问url 显示对应的组件

let router = new VRouter({
  mode: 'history',
  routes: [
    {
      path: '/apple',
      component: Apple
    },
    {
      path: '/banana',
      component: Banana
    }
  ]
})

4）将路由表注册到 Vue 的根实例中，这样在任何位置都可以访问该路由表。

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

说明：注册到根实例时需要使用router 作为键值，Router 对象作为值。

 

5) 在页面中指定显示位置

<div>
        <router-link :to="{path: 'apple'}">apple</router-link>
        <router-link :to="{path: 'banana'}">banana</router-link>
        <br/>
        <router-view></router-view>
      </div>

 

完整文件内容如下

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 TodoList from './TodoList'
import VRouter from 'vue-router'
import Banana from './components/banana'
import Apple from './components/Apple'

Vue.use(VRouter);

Vue.config.productionTip = false

let router = new VRouter({
  mode: 'history',
  routes: [
    {
      path: '/apple',
      component: Apple
    },
    {
      path: '/banana',
      component: Banana
    }
  ]
})

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

 

第一个组件：TodoList.vue

<template>
    <div>
      <div>
        <router-link :to="{path: 'apple'}">apple</router-link>
        <router-link :to="{path: 'banana'}">banana</router-link>
        <br/>
        <router-view></router-view>
      </div>
      <input v-model="inputValue"/>
      <button @click="addItem">提交</button>
      <ul>
        <todo-item
          v-for="(item, index) of todoList"
          :key="index" :content="item"
          :index="index"
          @deleteItem="deleteItem"
        >

        </todo-item>
      </ul>
    </div>

</template>

<script>
import TodoItem from './components/TodoItem'


export default {
  components: {
    'todo-item':TodoItem
  },
  data () {
    return {
      inputValue: '',
      todoList: []
    }
  },
  methods:{
    addItem () {
      this.todoList.push(this.inputValue);
      this.inputValue= '';
    },
    deleteItem (index) {
      this.todoList.splice(index,1);
    }
  }

}
</script>

<style>
</style>