简介
vue-router就是负责路由跳转的。什么是路由,就是一种对应关系,你访问什么url,就呈现给你什么页面
安装
npm i vue-router
创建路由测试页面
在src下创建pages目录,专门存放路由组件
创建一个简单Show.vue
<template>
<div>
这是Show.vue
这是Show.vue
这是Show.vue
这是Show.vue
这是Show.vue
这是Show.vue
</div>
</template>
<script>
export default {
name: "Show"
}
</script>
<style scoped>
</style>
路由配置
在src目录下,创建router目录,创建index.js文件。内容如下:
//该文件用于创建整个应用的路由器
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) //vue-router本身是一个插件,需要注册
import Show from "../pages/Show/Show"; //引入测试页面
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{ //给这个测试页面加上路由
path: '/show', //这个就是页面的访问路径
component: Show
},
]
})
在main.js中引入此文件
import router from './router' //这里是导入我们写的文件
new Vue({
render: h => h(App),
router //这里是挂载到vue身上
}).$mount('#app') //这里挂载的是 public/index.html 的id为app的 div
在App.vue中放上router-view作为占位符
<template>
<div>
这是一个app
<router-view></router-view>
</div>
</template>
测试搭建是否成功
访问 localhost:8080/
路径栏出现 # 号,说明路由组件引入成功
尝试访问我们刚刚配置的Show.vue http://localhost:8080/#/show (/show就是就是我们在上方配置的路径)