这里介绍一下 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.title }}
最后我们按照文档上的例子,新建一个详情 todo.vue
Loading...
{{ error }}
{{ todo.title }}
这样就实现了点击进入查看详情了,这里是简单介绍了一下 vue-router 的用法