vue-router是Vue官方给我们的路由解决方案,方便我们管理SPA项目中组件的切换
目录
一.安装vue-router包
npm i vue-router -S
二.创建路由模块
我们需要在src源代码目录下新建一个router文件夹
在router文件夹下新建index.js路由模块
然后我们初始化一下index.js路由模块:
// 导入Vue和VueRouter包
import Vue from 'vue'
import VueRouter from 'vue-router'
// 调用Vue.use()函数,把VueRouter安装为Vue的插件
Vue.use(VueRouter)
// 创建一个路由实例
const router = new VueRouter()
// 向外共享实例对象
export default router
三.导入-挂载路由模块
我们需要导入挂载到main.js模块中,全局进行使用路由模块
// 导入路由模块-拿到路由实例对象
import router from '@/router'
//or
import router from '@/router/index.js'
//在进行模块化导入的时候,无论是ES6模块导入,还是commonJS模块导如果给定的是文件夹,那么默认导入这个文件夹下名字为index.js的模块
//挂载
new Vue({
render: h => h(App),
//router:router简写
router
}).$mount('#app')
四.定义路由规则和占位符
现在路由模块已经全局可用了,我们来配置一下路由模块:
// 导入组件
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
import Move from '@/components/Move.vue'
//在原有VueRouter构造函数中定义路由规则
const router = new VueRouter({
routes: [
{ path: '/Home', component: Home },
{ path: '/About', component: About },
{ path: '/Move', component: Move }
]
})
占位符的使用(占位符本质就是一个出口,如果不使用占位符的话,我们是看不到所对应的组件的)
<router-link to="/Home">首页</router-link>
<router-link to="/About">关于</router-link>
<router-link to="/Move">更多</router-link>
//or
<a href="#/Home">首页</a>
<a href="#/About">关于</a>
<a href="#/Move">更多</a>
// App.vue
<router-view></router-view>
重定向路由规则
const router = new VueRouter({
routes: [
//重定向
{ path: '/', redirect: '/Home' },
{ path: '/Home', component: Home },
{ path: '/About', component: About },
{ path: '/Move', component: Move }
]
})