Vue 2.0 初探(六)

/ 0评 / 0

这里介绍一下 vue-router,按照我之前的安装方法其实已经安装过 vue-router 了,这里我再说一下安装方法

npm install vue-router

然后在项目中引入,在 main.js 中添加下面代码

import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes =[
  {path: '/', component: Todos},
  {path: '/todo/:id', component: Todo }
]

const router = new VueRouter({
  routes
})

new Vue({
  el: '#app',
  template: '',
  components: { App },
  router
})

这样就添加好路由了,但是还不能显示出来,需要我们去修改页面模板代码,首先修改 App.vue






这里删除了两个组件,因为路由会调用todos这个组件,这样我们就需要将 todoForm 这个组件设置成 todos 的子组件了,这里我们修改 Todos.vue,一定要注意最外面添加的那个 div






最后我们按照文档上的例子,新建一个详情 todo.vue




这样就实现了点击进入查看详情了,这里是简单介绍了一下 vue-router 的用法

评论已关闭。