Vue-router的安装使用详细讲解

一.基本路由

1.基本使用

1. 安装vue-router,命令,因为现在默认是最新版本,且只支持vue3,所以vue2使用需要指定版本安装

npm i vue-router@3

2. 在src目录下创建router文件夹,然后创建index.js文件来编写router配置项

//该文件专门用于创建整个应用的路由实例对象
import VueRouter from "vue-router";
//引入组件
import About from "@/components/About";
import Home from "@/components/Home";
//创建并暴露一个路由实例对象
export default new VueRouter({
   
  routes: [
    {
   
      path: "/about",
      component: About,
    },
    {
   
      path: "/home",
      component: Home,
    },
  ],
});

3. 在main.js文件中 导入并应用插件:

.....
//引入vue-router插件
import VueRouter from "vue-router";
// 引入路由实例对象
import router from "@/router";
//应用插件
Vue.use(VueRouter);
Vue.config.productionTip = false;
new Vue({
   
  render: (h) => h(App),
  router,//注册路由实例对象
}).$mount("#app");

4. 实现切换(active-ckass可配置高亮样式)

<router-link active-class=“active” to = “/home”>Home
roter-link是使用标签,to是跳转地址

5. 指定展示位置

<router-view><router-view/>

2.几个注意点

1. 路由组件通常存放在 pages 文件夹，一般组件通常存放在 components 文件夹。
2. 通过切换，‘隐藏’了的路由组件，默认是被销毁掉的，需要时再去挂载。
3. 每个组件都有自己的 $route 属性,里面存储着自己的路由信息。
4. 整个应用只有一个router,可以通过组件的 $router 属性获取到 。

二.嵌套(多级)路由

1. 配置路由规则,使用 children 配置项:

  routes: [
    {
   
      path: "/about",
      component: About,
    },
    {