接下来我们要做的是vue的路由处理，首先当然是安装：
npm install vue-router
接下打开我们的main.js，引入我们vue-router，然后在告诉vue我们要使用我们的vue-router
import Vue from ‘vue‘ import VueRouter from ‘vue-router‘ import App from ‘./App‘ Vue.use(VueRouter) /* eslint-disable no-new */ new Vue({ el: ‘#app‘, template: ‘<App/>‘, components: { App } })
接下来我们开始使用，比如我们的首页我们是用我们的todo-items这个组件来处理
const routes=[ {path:‘/‘,component:todoItems}, ]
那么我们当然也要把它引用进来
import todoItem from ‘./components/Todo-items‘
接下来我们还要做一件事情就是访问一个todo跟上一个id
const routes=[ {path:‘/‘,component:todoItem}, {path:‘/todo/:id‘,component:Todo} ]
但是我们并没有todo这个组件所以创建一个toto的组件
<template> </template> <script> export default { data () { return { } }, } </script>
在main.js中也是要引用进来的
import Todo from ‘./components/todo‘
然后实例化我们的router
const router = new VueRouter({ routes })
但是我们还要告诉的们vue我们要把router传递进去的
import Vue from ‘vue‘ import VueRouter from ‘vue-router‘ import App from ‘./App‘ import todoItem from ‘./components/Todo-items‘ import Todo from ‘./components/todo‘ Vue.use(VueRouter) const routes=[ {path:‘/‘,component:todoItem}, {path:‘/todo/:id‘,component:Todo,name:‘todo‘} ] const router = new VueRouter({ routes }) /* eslint-disable no-new */ new Vue({ el: ‘#app‘, template: ‘<App/>‘, components: { App }, router })
然后我们的视图内容交给我们router来处理，也就是我们在app.vue中的组件引用那块，不直接渲染
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- <hello></hello> -->
<!-- <todo-item :todos="todos"></todo-item>
<todo-form :todos="todos"></todo-form> -->
<router-view :todos="todos"></router-view>
</div>
</template>
<script>
import Hello from ‘./components/Hello‘
// import todoForm from ‘./components/todo-form‘
// import todoItem from ‘./components/Todo-items‘
export default {
name: ‘app‘,
data(){
return{
message:‘this is todos‘,
todos:[
{id:1,title:"learn vuejs",completed:false},
],
}
},
computed:{
todoCount(){
return this.todos.length;
}
},
components: {
Hello
}
}
</script>
<style>
#app {
font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
但是这个时候我们的form并没有显示，那么我们就在首页的todoItem中引用这个子组件，script里面的代码
<script> import todoForm from ‘./todo-form‘ export default { name:‘todos‘, props:[‘todos‘], data(){ return { newTodo:{id:null,title:"",completed:false} }//定义一个obj; }, props:[‘todos‘], methods:{ deleteTodo(index){ this.todos.splice(index,1);//删除下标为index的元素 }, toggleCompletion(todo){ todo.completed = !todo.completed; } }, components: { todoForm } } </script>
当然也要在template中引用这个组件
<template> <div id="todos"> <ul class="list-group"> <li class="list-group-item" v-for="(todo,index) in todos" v-bind:class="{‘completed‘ : todo.completed}"> <router-link :to="{ name: ‘todo‘, params: { id:todo.id }}">{{todo.title}} </router-link> <button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button> <button class="btn btn-xs pull-right margin-right-10" v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed ? ‘btn-success‘ : ‘btn-danger‘]">{{todo.completed ? ‘completed‘ : ‘working‘}}</button> </li> </ul> <todo-form :todos="todos"></todo-form> </div> </template> <script> import todoForm from ‘./todo-form‘ export default { name:‘todos‘, props:[‘todos‘], data(){ return { newTodo:{id:null,title:"",completed:false} }//定义一个obj; }, props:[‘todos‘], methods:{ deleteTodo(index){ this.todos.splice(index,1);//删除下标为index的元素 }, toggleCompletion(todo){ todo.completed = !todo.completed; } }, components: { todoForm } } </script> <style> .completed{ color: green; font-style: italic; } .margin-right-10{ margin-right: 10px; } </style>
原文：http://www.cnblogs.com/longsiyuan/p/6106686.html