路由配置步骤:
第一步: 下载安装 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>