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 }
  ]
})

借用vue-router手动搭建前端路由

一.安装vue-router包

二.创建路由模块

三.导入-挂载路由模块

四.定义路由规则和占位符

重定向路由规则

猜你喜欢