20-前端路由相关配置
第一步在router创建路由index.js文件,并且进行路由的配置
//配置相关路由的信息
import VueRouter from 'vue-router'
import Vue from 'vue'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
//1.通过vue.use(插件),安装插件
Vue.use(VueRouter)
//2.创建路由对象
const routes = [
{
path:' ',
redirect:'/home' //设置路由默认地址,redirect是重定向,指向/home
},
{
path:'/home',
component:Home
},
{
path:'/about',
component:About
}
]
const router = new VueRouter({
//配置路由和组件之间的应用关系
routes
//mode:'history' 转换成history模式
})
//3.将我们的router对象传入到vue实例中
export default router
第二步,创建路由组件
<template>
<div>
<h1>我是About</h1>
<h2>我是About内容</h2>
</div>
</template>
<script>
</script>
<style>
</style>
<template>
<div>
<h1>我是Hmoe</h1>
<h2>我是home内容</h2>
</div>
</template>
<script>
</script>
<style>
</style>
第三步,在main.js实例中引用路由
import Vue from 'vue' //引用vue
import App from './App.vue'
import router from './router/index.js' //引用路由
import store from './store'
Vue.config.productionTip = false
new Vue({
router, //加载路由
store,
render: h => h(App)
}).$mount('#app')
第四步,在vue实例中调用路由组件
<template>
<div id="app">
<router-link to="/home">首页</router-link><br /> //VUE自带的组件,超链接
<router-link to="/about">关于</router-link>
<router-view></router-view> //根据超链接调用路由并显示出相应的路由组件
</div>
</template>
<style>
</style>