首页 > 其他分享 >Vue — 路由

Vue — 路由

时间:2024-03-12 14:48:47浏览次数:19  
标签:Vue component new VueRouter path router 路由

一、路由的使用步骤

1.Vue2.0版本下载对应路由3.6.5版本

yarn add [email protected] / npm i [email protected]

2.引入路由包

import VueRouter from 'vue-router';

3.安装注册

Vue.use(VueRouter)

4.创建路由对象

const router = new VueRouter()

5.注入到new Vue()中,与Vue建立关联

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

6.创建组件,配置路由规则

const router = new VueRouter({
  routes : [
    {path : '/find',component : Find},
    {path : '/friend',component : Friend},
    {path : '/my',component : My}
  ]
})

7.准备导航链接 配置路由出口

      <div>

        <a href="#/find">更多</a>
        <a href="#/my">我的</a>
        <a href="#/friend">圈子</a>

      </div>
      <div>
      //路由出口 router-view       
      <router-view></router-view> </div> </div>

二、路由模块封装

1.新建router文件夹

2.导出router使用

import VueRouter from 'vue-router';
import Find from '@/views/Find.vue'
import Friend from '@/views/Friend.vue';
import My from '@/views/My.vue';
import Vue from 'vue';


Vue.use(VueRouter)

const router = new VueRouter({
  routes : [
    {path : '/find',component : Find},
    {path : '/friend',component : Friend},
    {path : '/my',component : My}
  ]
})

export default router

 三、声明式导航 

1. 导航链接vue-router提供了一个全局组件router-link,取代a标签

(1)能跳转,配置to属性,to属性不需要加# ,本质还是a标签

(2)能高亮,默认会提供高亮类名 .router-link-active(模糊匹配)router-link-exact-active(精确匹配)

    <router-link to="/find">
        更多音乐
      </router-link>
      <router-link to="/my">
        我的音乐
      </router-link>
      <router-link to="/friend">
        音乐圈子
      </router-link>


a {
  display: inline-block;
  width: 80px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  background-color: #4b4949;
  color: #fff;
  text-decoration: none;
}

.router-link-active {
  background-color: #9b9797;
  color: #c52d2d;
}

(3)自定义配置高亮类名

const router = new VueRouter({
  routes : [
    {path : '/find',component : Find},
    {path : '/friend',component : Friend},
    {path : '/my',component : My}
  ],
  linkActiveClass : 'active',
  linkExactActiveClass : 'exactActive',
})

2.跳转传参

(1)查询参数传参

    <!-- to="/path?参数=值" -->
      <router-link to="/find?music=闹海">闹海</router-link>
      <router-link to="/find?music=思如雪">思如雪</router-link>
      <router-link to="/find?music=原点">原点</router-link>
      <router-link to="/find?music=丈母娘入阵曲">丈母娘入阵曲</router-link>
      <router-link to="/find?music=尸祖救场曲">尸祖救场曲</router-link>
 <div>
        {{ $route.query.music }}
 </div>
 created(){
    console.log(this.$route.query)
 }

(2)动态路由传参

const router = new VueRouter({
  routes : [
    {path : '/find',component : Find},
    {path : '/friend/:name',component : Friend}, //1.配置路由规则
    {path : '/my',component : My}
  ],
  linkActiveClass : 'active',
  linkExactActiveClass : 'exactActive',
})

  <!-- 2.配置导航链接 -->
你的朋友<router-link to="/friend/张张">张张</router-link>




 <!-- 3.参数获取 -->
 {{ $route.params.name }}

两种参数的区别:

查询参数适合多个参数传参,语法/path?name=jack&age=14,获取参数的方式$route.query ;

动态路由写法比较简洁适合单个路由传参,需要先配置动态路由,语法/path/jack,获取参数的方式$route.params

四、路由重定向

说明:重定向-->匹配path后,强制跳转path路径

 

const router = new VueRouter({
  routes : [
    {path : '/',redirect:'/my'},  //强制重定向
    {path : '/find',component : Find},
    {path : '/friend/:name',component : Friend}, 
    {path : '/my',component : My}
  ],
  linkActiveClass : 'active',
  linkExactActiveClass : 'exactActive',
})

 

五、路由404

说明:当路径找不到匹配时,在页面有404提示

const router = new VueRouter({
  routes : [
    {path : '*',component : NotFound}
  ],
})

六、模式设置

(1)hash路由(默认)有#

(2)history路由(常用)没有#  需要后端开发配合配置访问规则

 

const router = new VueRouter({
  routes : [],
  mode:'history',//hash

})

 

 

 

标签:Vue,component,new,VueRouter,path,router,路由
From: https://www.cnblogs.com/qinlinkun/p/18068242

相关文章

  • 在Vue 3中,当computed属性中使用到的store中的变量或ref变量发生更新时,computed属性会
    computed传入一个getter函数,返回一个默认不可手动修改的ref对象在Vue3中,当computed属性中使用到的store中的变量或ref变量发生更新时,computed属性会自动重新计算,反映出最新的值。就是任何组件内导致store的变量变化也会导致其它组件内的computed变量变化与执行在Vue3中,当......
  • Vue3中使用TinyMce编辑器
    在线演示地址:TinyMce编辑器邮件发送一,安装TinyMce富文本npminstall@tinymce/tinymce-vue-Snpminstalltinymce-STinyMce本身是英文编辑器,所以还需要下载中文本地化文件:https://www.tiny.cloud/get-tiny/language-packages/下载完成后放入node_modules下的tinymce文......
  • VUE后台获取数据,并将数据递归为树接口所需数据形式
    后台获取数据形式(parentID=0的是父级,parentID不为0的,如果parentID与某个对象中的id相等,则表示为该对象的子级。) 代码转换:<script>varroomMenuDataL;//后台获取的教室数据methods:{//获取教室树getroommenu(){consttoken=this.$cookieTools.getTo......
  • vue3 keepalive 失效
    好久没更新博客了,重复拧螺丝keepalive之前用过,但是好久了,所以这次遇到问题觉得有点新颖我遇到的问题是在路由里面设置子路由,子路由的router-view设置keepalive不生效的问题 之前用了keep-alive没有用v-slot因为router-view就是一个单独的组件,他的本质并不是使用url对应的组......
  • Vue学习笔记46--scoped样式 + less
    scoped样式<!--组件的默认样式css写法--><!--<stylescoped>.demo{background-color:cadetblue;}</style>--><stylelang="less"scoped>.demo{background-color:cadetblue;.myfontsize{font-size:40px;}......
  • Vue3自定义指令实现权限控制
    使用Pinia(Vue.js的轻量级状态管理库,是Vuex的替代品)来管理用户权限,并结合自定义指令控制元素的显隐。步骤操作如下:1、安装Pinia:npminstallpinia或yarnaddpinia解释:安装Pinia库,这是一个轻量级的状态管理库,适用于Vue3。2、创建PiniaStore://stores/user.jsimport{......
  • 创建Vue3+Vite+TypeScript项目
    一、安装node环境,安装18.0或更高版本的Node.js  推荐使用nvm管理node版本:一看就会使用nvm实现多个版本的node自由切换-始是逍遥人-博客园(cnblogs.com)二、创建项目  1、选择一个工作路径,如:E:\webproject  2、打开cmd命令窗口进入到当前目录    快捷方式:直接......
  • 创建一个vue项目
    1.使用vite创建项目npmcreatevite@latest2.替换main.js//从Vue.js框架中导入createApp函数。createApp是用来创建Vue应用的函数。import{createApp}from'vue'//导入一个CSS文件,这个文件包含了应用程序的样式信息。'./style.css'表示这个CSS......
  • webpack.config.js和vue.config.js的区别
    webpack.config.js 和 vue.config.js 是两个不同的配置文件,用于配置不同的工具和框架webpack.config.js:用途:这是webpack的配置文件,用于配置和定制webpack构建过程的各个方面,包括入口文件、输出目录、模块加载器、插件等。适用范围:适用于所有基于webpack的项目,不仅......
  • vue3—尚硅谷禹神笔记转载
    1.Vue3简介2020年9月18日,Vue.js发布版3.0版本,代号:OnePiece(n经历了:4800+次提交、40+个RFC、600+次PR、300+贡献者官方发版地址:Releasev3.0.0OnePiece·vuejs/core截止2023年10月,最新的公开版本为:3.3.41.1.【性能的提升】打包大小减少41%。初次渲染快5......