Vue_的路由

什么是路由呢？

路由就是根据网址的不同，返回不同的内容给用户

router-view显示的是当前路由地址所对应的内容

路由的配置都放在router文件下的index.js文件里。

我们对我们新建的项目进行优化，我们所有的代码编写基本都是在src项目中，所以对里面的内容进行改写。

当我们访问根文件的时候，希望返回的是首页。

eg:我们建了一个home的Vue组件，也建了一个list的组件

<template>
    <div>hello home</div>
</template>
<script>
  export default{
        name:'Home'
    }
</script>
<style></style>

list一致。在router中就可可以配置它们的路由了。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/home.vue'
import List from '@/pages/list/list.vue'



Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/list',
      name: 'List',
      component: List
    }
  ]
})

注意：import XXX的名字要和组件中name 的名字最好一致，后续比较好维护。

这样我们再来浏览器中输入地址，就会跳转到响应的页面

在APP.vue 中，我们有router-view，意思为显示当前路由对应的内容。所以就实现了输入地址显示相应页面的功能。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>