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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// 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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
学习过程中,难免出错。如果您在阅读过程中遇到不太明白,或者有疑问。欢迎指正...联系邮箱crazyCodeLove@163.com
如果觉得有用,想赞助一下请移步赞助页面:赞助一下