vueRouter 重定向高亮传参嵌套简单示例

最新推荐文章于 2023-12-30 23:44:01 发布

paidaboluo

最新推荐文章于 2023-12-30 23:44:01 发布

阅读量403

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/paidaboluo/article/details/126228853

版权

本文介绍了Vue Router的基本使用，包括前端路由概念、安装方式、重定向、路由高亮、跳转与参数传递以及路由嵌套。通过实例展示了如何设置重定向以确保首页面显示，自定义路由高亮样式，以及如何在组件间进行参数传递。此外，还提到了路由嵌套时的注意事项。

摘要由CSDN通过智能技术生成

概念

前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源

在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

基本使用

引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
创建路由new VueRouter(),接受的参数是一个对象
在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
path属性是url的地址,component属性就是显示的组件（传组件的对象）
创建的路由需要和vue实例关联一下
路由到的组件显示在哪个位置<router-view></router-view>

安装：

npm

npm install vue-router@4

yarn

yarn add vue-router@4

在router文件中

// 引入
import Vue from 'vue'
import Router from 'vue-router'
import home from '../views/home/index' // 组件


// 挂载
Vue.use(Router)
export default new Router({
    routes: [
    {
      path: '/index', // 路径
      name: 'index', // name属性
      component: home // 组件
    },
    {},{} // 路由
]
})

通过调用