1. 效果
基本路由.gif
2. 路由组件
Home.vue About.vue
3. 应用组件:App.vue
<div>
<!–路由链接–>
<router-linkto=”/about”>About</router-link>
<router-linkto=”/home”>Home</router-link>
<!–用于渲染当前路由组件–>
<router-view></router-view>
</div>
4. 路由器模块:src/router/index.js
exportdefaultnewVueRouter({
routes:[
{
path:’/’,
redirect:’/about’
},
{
path:’/about’,
component:About
},
{
path:’/home’,
component:Home
}
]
})
5. 注册路由器:main.js
importVuefrom’vue’
importrouterfrom’./router’
// 创建 vue 配置路由器
newVue({ el:’#app’, router, render:h=>h(app) })
6. 优化路由器配置
linkActiveClass:’active’,// 指定选中的路由链接的 class
7. 总结: 编写使用路由的 3 步
1) 定义路由组件
2) 注册路由
3) 使用路由
<router-link>
<router-view>
上一篇: Java培训SE基础之super使用场景
下一篇: 前端培训VUE之嵌套路由
