Vue之router

基本路由

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标签实现路由的跳转