vue路由配置--前端

路由配置步骤：

第一步： 下载安装 vue-router

npm/cnpm install vue-router

第二步：在项目入口文件main.js 中引入 vue-router

import VueRouter from 'vue-router'

第三步: 使用vue-router

Vue.use(VueRouter)

第四步：在main.js 文件中，配置路由规则

import home from './views/home.vue'

const routes = [

     {path:'/home',component:home}

 ]

第五步：创建vue-router实例对象,参数是路由配置规则

const router = new VueRouter({

routes

})

第六步：将router 实例对象挂载到根实例 new Vue()上

 new Vue({

     el: "#app",

     router,  // 将路由实例对象挂载到vue 实例上，这样每个组件都能访问该路由，全局都有该路由

     render: h => h(App),

})

第七步：在app.vue 根组件中定义导航标签 ，该标签最后被解析成a 标签

<router-link to="/home">首页</router-link>

<router-link to="/category">分类</router-link>

 第八步：在app.vue 根组件中定义一个坑 router-view 该标签就是用来放对应的路由匹配到的组件

<router-view></router-view>