20-前端路由相关配置

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>