vue-router路由使用

最新推荐文章于 2024-05-28 11:56:29 发布

原创最新推荐文章于 2024-05-28 11:56:29 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了Vue-router作为SPA应用的路由插件，详细讲解了路由的原理与分类，包括后端路由和前端路由的工作机制。接着阐述了如何安装、引入和配置Vue-router，以及如何创建和使用路由跳转页面，特别指出需要定义`<router-view>`作为组件的呈现位置。此外，还提到了使用Vue-router时的几个关键注意事项，如组件的组织、生命周期和路由信息的获取。

路由简介

vue的一个插件库，专门用来实现SPA（单页面）应用，点击导航链接不会刷新页面，只做局部更新

1.路由就是一组key-value的映射关系

2.key为路径，value可能是function或component

路由分类

后端路由

1）理解：value是function，用于处理客户端请求

2）工作过程：服务器收到请求时，根据请求路径找到匹配的函数处理请求，返回响应数据.

前端路由

1）理解：value 是 component，用于展示页面内容。

2）工作过程：当浏览器的路径改变时, 对应的组件就会显示。

使用路由

安装

npm i vue-router

引入

main.js文件中引入并应用vue-router

//引入vue-router
import VueRouter from 'vue-router'

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

创建并引入路由器

创建文件src/router/index.js

// 该文件专门用于创建整个应用的路由器

//引入vue-router
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'


//创建并导出一个路由器（router实例对象），管理一组一组的路由
export default new VueRouter({
    routes:[
        //路由规则
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

main.js文件中引入并配置

//引入路由器
import router from './router/index'

//vue实例配置路由器
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

使用路由器跳转页面

用vue-router插件提供的特殊标签（代替a标签）<router-link></router-link>实现路由切换，to属性定义要跳转的路径（与导航栏显示一致）

active-class指被激活时添加类，实现高亮效果

<!-- 使用vue-router插件提供的特殊标签（路由入口）实现路由切换 -->
<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>

此时发现并没有展示组件，是因为路由器找到路径也找到组件了，但是不知道该放在哪里，需要告诉路由器组件的呈现位置

用<router-view></router-view>定义路由窗口，也就是组件呈现位置

<!-- 路由窗口，指定组件呈现位置 -->
<router-view></router-view>

几个注意点

1.将路由组件（需要用路由器实现路由切换的组件）放到src/pages文件夹，一般组件放到src/components文件夹，来实现区分

2.没有展示出来的组件默认被销毁了，需要的时候再去挂载

3.每个组件都有自己的$route属性，里面存储自己的路由信息

4.整个应用只有一个router,可以通过组件的$route属性获取到。