首页 > 其他分享 >Vue-Router

Vue-Router

时间:2023-05-10 10:22:16浏览次数:59  
标签:插件 Vue js import Router 路由

@

目录
<img src="" style="zoom:50%" />

作用

教程

单个页面路由:https://cn.vuejs.org/guide/scaling-up/routing.html#client-side-vs-server-side-routing
多个页面:复杂组合
视频教程:B站Allen前端

使用流程

引入组件

安装:npm~
代码定义:\src\router\index.js下:
image

点击查看代码
// 路由:传送门入口,名字---通往对应的小世界
// 在此引入:安装路由
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'

// 标识: Vue.js 中使用 Vue Router 的方法。
// 它的作用是将 Vue Router 插件安装到 Vue.js 应用程序中,
// 并注册为一个全局插件,以便在整个应用程序中可用路由相关的属性和方法。
Vue.use(Router)


定义路由

image

实例

image

挂载

image

路由渲染位置

image

启动

标签:插件,Vue,js,import,Router,路由
From: https://www.cnblogs.com/JingyangXu/p/17387142.html

相关文章

  • vue国际化(多语言)
      方法1:用js-cookie包并且挂载在main.js上1、安装vue-i18n+js-cookie插件npminstallvue-i18n-Snpminstalljs-cookie--save2、去检查一下你安装的i18n版本是不是8.26.53、在main.js中引入4、在src上建立文件夹5、给创建的中文和英文添加语言注......
  • 使用vue的keep-alive缓存组件,三级菜单组件无法缓存问题解决
    使用vue做后台管理系统,需求是所有的菜单打开之后,下次点击的时候的使用缓存,这里很简单的做法就是用来包裹住;但是一级菜单和二级菜单都没有问题,三级菜单就会出现无法缓存的问题,网上找资料说是vue中keep-alive本身存在的缺陷,需要在路由守卫中将matched属性做一下优化,具体如下//......
  • vue2+vant2+rem+axios+钉钉自动登录 h5模板
    下载代码请轻轻的点一下这里~Node版本要求VueCLI需要Node.js8.9或更高版本(推荐8.11.0+)。你可以使用nvm或nvm-windows在同一台电脑中管理多个Node版本。本示例Node.js14.17.0启动项目npminstallnpmrundev打包项目打测试包会带vconsole控制台对......
  • vue sort 排序方法
    1、数据排序vararry=[9,5,6,7,5,6,3,1,0]arry.sort()//[0,1,3,5,5,6,6,7,9] 2、对象排序varlist=[{name:'张三',age:12},{name:'李四','age:23}];list.sort((a,b)=>{returna.age-b.age});//[{name:'李四','ag......
  • Vue路由跳转时的动画效果
    1.写一个layout组件,降<router-view/>包裹在transition标签里,实现路由跳转时的动画 2.在router/index.js里面引入该组件,并放在component:layout这里,功能完成 3.transition是vue的封装组件,具体可参考官网 https://cn.vuejs.org/guide/built-ins/transition.html#css-based-......
  • Vue2--入门学习
    看了慕课网的教学视频,觉得挺不错的,在此做个随堂记录,有兴趣的可以去看视频vue版本:2.5文档链接:https://v2.cn.vuejs.org/v2/guide/installation.html视频链接:https://www.imooc.com/video/16976 在vue官网下载开发版本的vue.js,并复制其代码到编译器中创建的vue.js文件中 ......
  • 《nodejs跨栏》vue篇——vue简介
    Vue读音读作viewVue文件结构参考链接:https://www.runoob.com/vue2/vue-directory-structure.html其中App.vue代码如下:点击查看代码<!--展示模板--><template><divid="app"><imgdecoding="async"src="./assets/logo.png">......
  • vue使用video.js库,引入语言脚本的方式
    第一种import'video.js/dist/video-js.css'importvideojsfrom"video.js";window.videojs=videojs;require('video.js/dist/lang/zh-CN');第二种import'video.js/dist/video-js.css'importvideojsfrom"video.js&q......
  • 基于.Net5+Vue+iView前后端分离通用权限开源系统
    在Github上,.Net通用的权限框架非常多,功能也都比较强大,但是对于很多初学者来说,想要从零学习框架的搭建,就比较困难了。所以,今天给大家推荐一套比较简单的前后端分离通用权限系统。项目简介这是一个基于.Net5+Vue+iView开发的、前后端分离通用权限系统,系统采用三层架构,该项目功能......
  • vue 导致el-menu高亮会失效的问题
    一个router转到另一个router常用的方法:this.$router.push({path:'',params:{}});this.$router.push({path:'',query:{}});这种方式传参都是可以接收到的。但是有个问题,导致中的el-menu不能高亮显示,进行跟踪以后会现:default-active与router的index都是一致。但就是不能高亮,除......