Vue添加路由vuerouter并创建页面

一般的，项目肯定是需要多个页面切换的，在前面的创建Vue项目中，没有选择路由功能，这里把这个功能加上。

1. 使用命令： npm install --save vue-router@3 安装vue路由功能，如下：

安装成功后会在node_modules多出一个vue-router文件夹。

如果在前面的创建项目中已经选择了路由，这里可以省去步骤1。

2. 创建/src/router/index.js文件，该文件是整个项目的路由文件。

/src/router/index.js文件的代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import GoodsIndex from '../views/goods/index.vue'
import HomeIndex from '../views/home/index.vue'

Vue.use(VueRouter)


const routes = [
    {
        path: '/',
        // 路由重定向 默认显示当前路由页面
        redirect: '/home',
        // 后置路由守卫，需要每个都配置  meta
        meta: { title: '首页' }
    },
    {
        name: 'home',
        path: '/home',
        component: HomeIndex,
        meta: { title: '首页' },
    },
    {
        name: 'goods',
        path: '/goods',
        component: GoodsIndex,
        meta: { title: '商品' },
    }
]
//创建并暴露 路由器
const router = new VueRouter({
    routes,
    // mode:'hash'  // 有#
})
/**
 * 前置路由守卫,这里一般用于登录权限判断
 * to:即将要进入的目标对象
 * from:当前导航正要离开的路由
 * next: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
 */
router.beforeEach((to, from, next) => {
    //
    next()
})

/**
 * 后置路由守卫  to，from
 */
router.afterEach((to) => {
    document.title = to.meta.title || '标题'
})

export default router 

3. 创建上面的视图文件

/src/views/goods/index.vue
/src/views/home/index.vue
代码如下：

首页

<template>
  <div>
    <div>欢迎首页</div>
    <router-link to='/goods'>商品</router-link>
  </div>
</template>

<script>
export default {
  name: "HomeIndex.vue"
}
</script>

<style scoped>

</style>

商品页面

<template>
  <div>商品页面</div>
</template>

<script>
export default {
  name: "GoodsIndex"
}
</script>

<style scoped>

</style>

4 在main.js中注册路由

import Vue from 'vue'
import App from './App.vue'

// 导入路由器
import router from './router/index.js'
Vue.config.productionTip = false
new Vue({
  // 注册路由器  Vue.prototype.$router=router
  router,
  render: h => h(App),
}).$mount('#app')

5. 修改app.vue启动页面

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  }
}
</script>

以上便是Vue添加路由vue-router并创建页面的所有流程。