vuejs,router

Posted 2020-08-21 流了个年

接下来我们要做的是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>