（四十二）Vue之路由及其基本使用Vue Router

文章目录

概念
基本使用
demo
几个注意点

上一篇：（四十一）Vuex之模块化与命名空间
下一篇：（四十三）Vue Router之嵌套路由

概念

在计算机科学和网络领域中，路由（Routing）是指确定数据包在网络中传输的路径和方式的过程。它涉及到根据源地址和目标地址之间的网络拓扑和路由表，选择最佳路径来将数据包从发送者传递到接收者的过程。

而在在前端开发中，路由是指在单页应用（SPA）中管理不同视图（View）之间切换和导航的机制。前端路由通过在浏览器中监听URL的变化，并根据URL的路径匹配相应的视图组件来实现页面的切换，而无需进行完整的页面刷新。

Vue Router是Vue.js官方提供的用于构建单页应用程序（Single-Page Application）的路由管理器。它允许您在Vue应用程序中实现客户端路由，通过定义路由规则和组件映射，实现不同路径之间的页面切换和导航。您可以在官方（https://router.vuejs.org/）中找到更详细的解释、示例和代码片段

基本使用

第一步：安装vue-router
请注意vue-router的版本也跟vue的版本有关系：

vue2只能使用vue-router3版本
vue3只能使用vue-router4版本
以npm为例：如果使用npm install vue-router命令默认安装最新版本，也就是vue-router4，如果需要安装vue-router3版本需要加个版本npm install vue-router@3

第二步：应用插件：Vue.use(VueRouter)

第三步：编写router配置项

   //引入VueRouterimport VueRouter from 'vue-router'//引入页面 组件import Page1 from '../components/page1'import Page2 from '../components/page2'//创建router实例对象，去管理一组一组的路由规则const router = new VueRouter({routes:[{path:'/page1',component:Page1 },{path:'/page2',component:Page2}]})//暴露routerexport default router

第四步：挂载路由

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

第五步：使用路由链接和视图

在Vue组件中，使用<router-link>组件来创建导航链接，以便用户可以点击进行路由导航。使用<router-view>组件来显示当前匹配到的路由组件。

<template><div><router-link to="/page1">page1</router-link><router-link to="/page2">page2</router-link><router-view></router-view></div>
</template>

当用户点击"page1"或"page2"链接时，Vue Router会根据路由规则匹配到对应的组件，并将其渲染在<router-view>中。

demo

路由配置：

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

Banner组件：

<template><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Vue Router Demo</h2></div></div>
</template><script>
export default {// eslint-disable-next-line vue/multi-word-component-namesname: "Banner"
}
</script><style scoped></style>

About组件：

<template><h2>我是About的内容</h2>
</template><script>
export default {// eslint-disable-next-line vue/multi-word-component-namesname: "About",beforeDestroy() {console.log('About组件即将销毁')},mounted() {console.log('About组件挂载完毕',this)}
}
</script><style scoped></style>

Home组件：

<template><h2>我是Home的内容</h2>
</template><script>
export default {// eslint-disable-next-line vue/multi-word-component-namesname: "Home",beforeDestroy() {console.log('Home组件即将销毁')},mounted() {console.log('Home组件挂载完毕',this)}
}
</script><style scoped></style>

App组件：

<template><div><div class="row"><Banner/><!--<div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Vue Router Demo</h2></div></div>--></div><div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group"><!-- 原始html中我们使用a标签实现页面的跳转 --><!-- <a class="list-group-item active" href="./about.html">About</a> --><!-- <a class="list-group-item" href="./home.html">Home</a> --><!-- Vue中借助router-link标签实现路由的切换 --><router-link class="list-group-item" active-class="active" to="/about">About</router-link><router-link class="list-group-item" active-class="active" to="/home">Home</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><!-- 指定组件的呈现位置 --><router-view></router-view></div></div></div></div></div>
</template>
<script>import Banner from "@/components/Banner";
export default {name: "App",components: {Banner},
}
</script>