vue路由router的创建

1、首先用脚手架搭建一个项目
2、使用npm下载包npm install vue-router
（不清楚的小伙伴看我前面的文章）

npm install vue-router

3、src目录下新建一个router文件夹，文件夹中新建index.js
在这里插入图片描述
4、在main.js文件中导入文件

import router from '@/router/index.js'
import App from '@/App.vue'
并注入router

总的如下

import Vue from 'vue'
import App from '@/App.vue'
import router from '@/router/index.js'

Vue.config.productionTip = false

new Vue({
  // 注入,记得要通过 router 配置参数注入路由，
  // 从而让整个应用都有路由功能
  router,
  render: h => h(App)
}).$mount('#app')

5、在刚才新建的index.js中，创建路由模块

// 1.引入vue和vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'

// 引入路由所映射的组件
import Index from '@/views/Index.vue'
// 挂载：让Vue使用VueRouter进行路由管理
Vue.use(VueRouter)

// 2.创建路由对象
var router = new VueRouter({
  // 3.配置路由，通过routes配置路由,它是一个数组，里面的每一个成员都是一个单独的路由对象
  routes: [
    // 4.配置具体的路由，一般来说有如下的几个参数
    // path:路由路径，以后这个值就是url的值
    // name:路由的名称
    // component:当前路由所映射的组件，它是一个组件对象，绝对不要写成字符串
    {
      name: 'index',
      path: '/index',
      component: Index
    }
  ]
})

// 暴露
export default router

6、在views中新建你的vue文件
注意要加入<router-view></router-view>

<template>
  <div id="app">
      <h1>我是app</h1>
      <!-- 添加路由映射的组件的展示区域，一定要设置展示区域，否则组件内容并不可见 -->
      <router-view></router-view>
  </div>
</template>

7、最后在你的主文件App.vue中加入链接

<template>
  <div id="app">
    <!-- 一定要设置to属性，它就可以设置为你想跳转的路由的path -->
    <router-link to="/index">首页</router-link> &nbsp;&nbsp;&nbsp;&nbsp;
    <router-link to="/product">产品</router-link>
    <!-- <a href="#/product">产品</a> -->
    <!-- 添加路由映射的组件的展示区域，一定要设置展示区域，否则组件内容并不可见 -->
    <router-view></router-view>
  </div>
</template>

来源：CSDN

作者：Moyo203

链接：https://blog.csdn.net/weixin_44289670/article/details/103483187

标签

vue

路由

vue路由