什么是路由呢?
路由就是根据网址的不同,返回不同的内容给用户
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>