基本路由
src/App.vue是我们的主界面,其中的<router-view/>
标签用于显示各组件视图内容
src/router/index.js是定义路由的脚本 path是路径, name是名称 ,component是跳转的组件 。
(1)我们现在定义两个页面组件,存放在src/components下
list.vue
<template> <div> 这是一个列表 </div> </template>
about.vue
<template> <div> 关于我们 </div> </template>
(2)定义路由
修改src/router/index.js
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import list from '@/components/list' import about from '@/components/about' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/list', name: 'List', component: list }, { path: '/about', name: 'About', component: about } ] })
(3)放置跳转链接
修改src/app.vue ,在<router-view/>
添加链接
<router-link to="/" >首页</router-link>
<router-link to="/list">列表</router-link>
<router-link to="/about">关于</router-link>
通过router-link标签实现路由的跳转