VueRouter的基本使用

Posted 2023-04-07

参考技术A

1.导入vue-router.js文件，必须插入到vue.js文件后面

2.定义路由规则

4.将创建好的路由对象绑定到Vue实例上

5.修改URL哈希值
6.通过<router-view>渲染匹配的组件

7.css样式

<router-link>标签：Vue Router中提供专门用于设置哈希值的标签；
<router-view>标签：Vue Router中提供专门用于将路由匹配到的组件渲染到指定位置；

2.给router-link设置选中样式
默认情况下我们可以通过重写router-link -active类名来实现设置选中样式，但是我们也可以通过linkActiveClass来指定选中样式；

案例: 在one界面中又有两个按钮，通过这两个按钮进一步 切换one中的内容

vue,VueRouter路由使用

router/index.js
导入Vue和路由插件VueRouter
导入自定义组件

import Vue from \'vue\'
import VueRouter from \'vue-router\'

const Home = () => import(\'../home/Home\')
const Profile = () => import(\'../profile/Profile\')

1.安装插件
Vue.use(VueRouter)

2.创建路由对象

const routes = [
  {
    path:\'\',
    redirect:\'/home\'
  },
  {
    path:\'/home\',
    component:Home
  },
  {
    path:\'/home\',
    component:Home
  }
]
const router = new VueRoute({
  routes
})

3.导出路由
export default router

App.vue
1.导入

new Vue({
  el:\'#app\',
  router,
  render:h => h(App)
})