关于vue-router路径配置的问题

最新推荐文章于 2023-03-09 11:31:43 发布
最新推荐文章于 2023-03-09 11:31:43 发布
阅读量386 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/kugeliu/p/6732706.html
版权

"/" 表示路由根目录

"/AdminPage" 表示一级路由

如果在一级路由下面配置子路由 "User",表示的意思是 "/AdminPage/User"，表示二级路由

三级路由“User/UserConfig” 表示的意思是“/AdminPage/UserConfig”,当然也可以直接配置，也就是说一级路由是可以省略的，但是其它的不行

同时几级的路由对应就要是几级的router-view,三级的路由无法使用二级的router-view

 

转载于:https://www.cnblogs.com/kugeliu/p/6732706.html

weixin_30776273
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2 设置router-view默认路径的实例
12-01
在学习vue的时候，遇到很多问题，这里做一些总结，持续更新。 今天说一个问题，就是在学习vue的时候，从之前的1.0版本升级到2.x的时候，遇到的问题。一个简单的设置默认路由。 在vue的官方文档中，并没有对这个做出案例和解释，不知道是不是我没发现。反正这个问题算是遇到的小小的坑吧。原谅一个菜鸟，什么都不懂。 在察阅文章的过程中，发现有前辈总结了这个方面的知识。 具体实现如下： import Vue from 'vue' import Router from 'vue-router' import goods from '../components/goods/goods' import r
VUE新建页面并配置路由
奈&何.
06-30 1378
一，新建页面并配置路由 二，去掉路径中的 # mode: ‘history’ 三，使用methods 页面跳转 1》直接跳转 router-link 2》使用点击事件跳转 修改data中属性的值 四，页面效果显示
vue-router配置之通用路径
weixin_30248399的博客
02-07 392
目的：浏览器地址栏输入了未匹配的地址时，前端控制跳转到首页index页面： 项目入口js:（一般根据项目结构不同，这个js一般取名为：app.js或者main.js） import Router from 'vue-router' Vue.use(Router); const router = new Router({ routes: [ {path...
Vue-Router——一些配置
cod16xx的博客
05-31 1187
3
Vue 一套构建用户界面的渐进式的框架 （路由篇~）
Jine
11-04 1197
此块知识内容基础，没有官方文档全，仅供参考 概述（了解） 单页面富用阶段（SPA） SPA 主要的特点是在前后端分离（后端只提供API来返回数据，前端通过Ajax获取到的数据渲染到页面）的基础上加了一层前端路由 也就是由前端来维护一套路由规则 前端路由的核心：改变URL，但页面不进行整体的刷新 （俩种方法：1、URL的hash 2、H5的history模式：pushState、replaceState） vue-router 目前前端流行的三大框架，都有自己的路由实现： Angular的ngR
关于vue-router路径计算问题
08-30
在遇到“vue-router路径计算问题”时，问题的核心通常在于如何正确地处理和配置应用的基础路径(base)。在给定的描述中，开发者遇到了一个特定的情况：前端应用使用 Vue Router 的 history 模式，并且静态资源是从 `...
基于vue-router 多级路由redirect 重定向的问题
10-18
在 vue-router 中配置多级路由并进行重定向，需要仔细处理每个级别的路由配置，确保路径书写正确且符合实际项目需求。当遇到重定向问题时，应根据具体情况分析可能的错误原因，如路径错误、参数传递不当等，并通过...
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
导出const路由器：VueRouter =新的VueRouter（{路由：[{路径：'/'，名称：'index'，组件：Index，}，]，}，）; // sitemapMiddleware.js从“ vue-router-sitemap”导入VueRouterSitemap； 从“路径”导入路径； 导入...
vue-router+nginx 非根路径配置方法
08-27
"vue-router+nginx 非根路径配置方法" 作为一名IT行业大师，我将详细介绍vue-router+nginx 非根路径配置方法的相关知识点。 一、vue-router 简介 vue-router 是 Vue.js 官方提供的路由管理器，用于管理应用程序中...
解决vue-router 嵌套路由没反应的问题
10-14
const router = new VueRouter({ mode: 'history', routes: [ { path: '/recom', component: Recom, // 假设Recom是父组件 children: [ { path: 'view', name: 'recomView', component: recomView }, { path...
关于vue-router路径配置的问题（此文主要是记录三级路由的访问路径，以及安装、路由组件、路由重定向）
qq_56715703的博客
03-09 3812
node路由：用户根据不同的url地址，来访问不同的页面vue路由（客户端）：组件结合路由规则来构建单页面应用。
Vue3中router的基本配置以及使用
小杨的博客
12-08 2012
第四步 ： 创建两个子路由文件，并在src目录下创建文件夹views。第二步 ： 创建文件夹router，并创建一个index.js文件。第三步 ： 进行 index.js 的相关配置。第五步 ： 在main.js中进行相关配置。第一步 ： 安装router。编程式路由的基础写法。
vue路由配置步骤
weixin_64725948的博客
11-16 2712
vue路由配置步骤
Vue的router配置
qq_43145310的博客
07-13 2402
Vue的router配置
vue-router 基本使用
weixin_30273931的博客
03-24 1万+
　　路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 　　点击之后，怎么做到正确的对应，比如，我点击h...
vue-router配置介绍和使用方法（一）
热门推荐
草巾冒小子的博客
05-11 2万+
1. vue-router配置流程概述： 1) 准备工作：建立项目文件夹，通过cmd命令，完成新建文件夹的相关项目配置（具体操作，请参考[“如何进行 node.js的 安装与卸载 ”](https://blog.csdn.net/qq_35393869/article/details/80088193)）； vue init webpack 项目文件名 接着按要求配置Project n...
vue 怎么配置路由router
chenw9527的博客
07-15 1330
一级路由的 内容就是二级路由 一级路由 褐色的box 二级路由 蓝色的box 内容页面 绿色box 二级路由的内容就是绿色页面内容
vue-router配置html页面
最新发布
12-09
根据提供的引用内容，vue-router主要用于单页面应用程序中的路由管理。在Vue.js中，我们可以使用vue-router来配置HTML页面。下面是一个简单的例子： 1.首先，需要安装vue-router。可以使用npm或yarn进行安装： ```shell npm install vue-router ``` 2.在Vue.js应用程序中，需要导入vue-router并使用Vue.use()方法来安装它： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 3.然后，需要定义路由。可以在VueRouter实例中使用routes选项来定义路由。每个路由都应该包含一个路径和一个组件。例如： ```javascript const routes = [ { path: '/home', component: Home }, { path: '/about', component: About } ] ``` 4.接下来，需要创建VueRouter实例并将其传递给Vue实例： ```javascript const router = new VueRouter({ routes // short for `routes: routes` }) const app = new Vue({ router }).$mount('#app') ``` 5.最后，在HTML页面中，可以使用<router-link>标签来创建链接，使用<router-view>标签来显示组件。例如： ```html <router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> <router-view></router-view> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值