Vue Router的基本使用、router-link以及router-link-active

三级目录

1、下载router

在Vue中，可以使用Vue Router来实现路由功能。Vue Router是Vue.js官方提供的一个插件，用于实现前端的路由管理。

使用Vue Router可以将不同的页面映射到对应的URL路径，并通过URL的变化在不刷新页面的情况下展示不同的内容。这样可以实现单页应用（SPA）的效果，让用户在页面之间进行无刷新的导航操作。

以下是Vue Router的基本用法：

1. 安装Vue Router：首先，在项目中安装Vue Router依赖。可以使用npm或yarn进行安装。

npm install vue-router

或

yarn add vue-router

2、router基本配置

1、创建路由配置：创建一个路由配置文件j夹router，在router文件夹下创index.js文件，用来定义各个页面对应的路由规则。路由规则包括URL路径和对应的组件。

2、创建一个views文件夹用来存放路由要加载的组件

3、index.js中路由的基本配置

// 导入Vue和VueRouter模块
import Vue from 'vue';
import VueRouter from 'vue-router';

// 使用VueRouter插件
Vue.use(VueRouter);

// 创建VueRouter实例，并配置路由规则
const router = new VueRouter({
  // 路由配置...
});

// 创建Vue实例，并注册VueRouter
new Vue({
  // ...
  router, // 注册VueRouter
  // ...
});
export default router

4、注册路由：main.js中注册路由，以便使用路由功能。

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

3、路由规则设置

Vue中，使用Vue Router进行路由配置是通过创建一个VueRouter实例并定义路由规则来完成的。
语法：

import Home from './views/Home.vue';
import About from './views/About.vue';
import Contact from './views/Contact.vue';


const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact
    }
  ]
});

在Vue Router的路由规则中，每个路由对象可以包含以下三个属性：

1. path：路径属性指定了路由所对应的URL路径。当用户访问该路径时，路由将匹配到对应的组件进行渲染。例如，path: '/about'表示该路由对应的URL路径是"/about"。

2. name：名称属性用于给路由配置一个唯一的名称。它可以在代码中用作路由的标识符，并且在进行程序化导航或链接生成时非常有用。通过调用router.push()或router.replace()方法，并传递路由的name属性值作为参数，可以实现无需指定完整路径的页面跳转。在模板中，也可以使用<router-link>组件来生成与具有给定name属性的路由对应的链接。

3. component：组件属性指定了在路由匹配成功时要渲染的组件。可以是引入的其他组件，或者直接定义的组件对象。当用户访问该路由时，Vue会将组件渲染到相应的视图中。例如，component: Home表示当匹配到该路由时要渲染名为Home的组件。

综上所述，path属性用于指定URL路径，name属性用于给路由配置一个唯一的名称，component属性用于指定路由匹配成功时要渲染的组件。这三个属性共同组成一个完整的路由规则，用于定义前端路由的映射关系。

3、案例演示

例如，假设有两个页面：HomeView页面和AboutView页面
1、在views目录下创建HomeView.vue和AboutView.vue

HomeView.vue

<template>
  <div><p>Home page</p></div>
</template>

<script>
export default {
  name:'HomeView'

}
</script>

<style>

</style>

AboutView.vue

<template>
  <div><p>About page</p></div>
</template>

<script>
export default {
  name:'AboutView'

}
</script>

<style>

</style>

2、然后在index.js中定义路由规则：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';//引入Home
import About from './components/About.vue';//引入About

Vue.use(VueRouter);

const routes = [
  { path: '/', 
  component: Home },
  { path: '/about', 
  component: About }
];

const router = new VueRouter({
  routes
});

export default router;

3. 使用路由：在App.vue中，通过router-link进行组件导航，通过<router-view>来显示当前路由匹配到的组件。

<template>
  <div id="app">
    <div id="header">    
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </div>
    <div id="page">
      <router-view></router-view>
    </div>   
  </div>
</template>


<script>
export default {
  name:'App',  
}
</script>


<style>
#header{
  width: 300px;
 display: flex;
 justify-content: space-around;
}


#page{
   margin: 30px  
}


#app{
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center; 
}

</style>

以上我们设置HomeView.vue为默认页，点击About将切换到AoutView.vue

4、router-view和router-link

<router-view>和<router-link>是Vue Router中两个重要的组件，用于实现页面渲染和路由导航。

1. <router-view>：

   • <router-view>是用于在应用程序布局中显示当前路由所对应的组件内容。
   • 在Vue Router中，通过定义路由规则，并将组件与路由路径进行映射，当用户访问不同的URL时，相应的组件会被渲染到<router-view>中展示。
   • 示例代码：

     <router-view></router-view>
     

   • 注意：<router-view>通常只有一个，用于展示当前活动的路由组件。

2. <router-link>：

   • <router-link>用于创建导航链接，使用户可以点击链接以切换路由并导航到其他页面。
   • 它会自动根据提供的路由路径生成正确的<a>标签，并且在用户点击时触发路由切换。
   • 示例代码：

     <router-link to="/home">Home</router-link>
     

   • to属性指定了目标路由的路径，当用户点击该链接时，会导航到指定的路由对应的组件。
   • 注意：<router-link>会被渲染为一个带有合适的属性和事件的<a>标签。

通过结合使用<router-view>和<router-link>，可以实现基本的路由功能和页面导航效果。用户点击<router-link>生成的链接时，Vue Router会根据路由规则切换到相应的组件，并将其渲染到<router-view>中显示。

<div id="header">    
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </div>
    <div id="page">
      <router-view></router-view>
    </div>   

5、router-link-active和router-link-exact-active

router-link-active和router-link-exact-active是Vue Router提供的两个CSS类名，用于在<router-link>组件激活时添加样式。

• router-link-active类名会在当前路由匹配到<router-link>的目标路径时被添加到<router-link>组件上。无论目标路径是父路径的一部分还是完全匹配，只要存在匹配，该类名就会被添加。

• router-link-exact-active类名则是在当前路由完全匹配到<router-link>的目标路径时才会被添加。如果目标路径是当前路由路径的子路径或者父路径的一部分，该类名不会被添加。

总结：
router-link-active：用于模糊匹配，子路径激活时父路径也会添加样式

router-link-exact-active：用于精确匹配，只有路径完全一致才会添加样式

通过这两个CSS类名，你可以为激活状态的路由链接添加自定义样式，以突出显示当前所在页面或导航选项。

我们继续以上面的例子为例：
1、精确匹配： router-link-exact-active

在App.vue中添加下列代码：

#header a.router-link-exact-active{
  color:rgb(139, 12, 18)
}//注意这里的a标签，就是router-link

Home的路径："/"
About的路径："/about"

当我们点击Home时，Home的会被添加样式类，样式改变
当我们点击About时候，About会被添加样式类，样式改变

因为精确匹配需要路径完全一致，而"/“和”/about"的路径并不相等


2、模糊匹配：router-link-active

将刚才的代码改为

#header a.router-link-active{
  color:rgb(139, 12, 18)
}//注意这里的a标签，就是router-link

Home的路径："/"
About的路径："/about"

同样当我们点击Home时，Home的会被添加样式类，样式改变

但是当我们点击About时候，Home和About都会会被添加样式类，样式改变

因为模糊匹配，子路径激活则父路径也会被添加样式，而"/“是”/about"的父路径