10. Vue-router介绍（官方路由管理工具）

一、知识点

1. 先建一个vue文件
2. 然后在router.js文件中，import以及注册
3. 最后在页面中用 router-link使用该组件

二、具体步骤

1.先建一个vue文件

<template>
  	<div>
  		hello info component
  	</div>
</template>

<script>
	export default {
		name: "info"  
	}
</script>

<style scoped>
	
</style>

2.然后在router.js文件中，import以及注册

• 首先 import Info from './views/Info.vue'
Info后面注册的时候会用到，也就是component。
  './views/Info.vue' 就是组件的路径

• 然后是注册：
  path 这是个路径，后面在页面中router-link引用插件的时候，会用到
  name 好像没啥用
  component 这里的值要和上面import的值保持一致

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Info from './views/Info.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/info',
      name: 'info',
      component: Info
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

最后在页面中用 router-link使用该组件
这里的 to="/info" 里的值就是router.js文件配置里的path，然后在浏览器中的路径也是这个路径

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/info">Info</router-link>
    </div>
    <router-view/>
  </div>
</template>