精华内容
下载资源
问答
  • Vue动态路由

    2020-12-20 10:53:17
    动态路由 在router文件中先定义路由 import Vue from 'vue' import VueRouter from 'vue-router' //主页 import Home from '../views/Home' //详情 import Detail from "@/views/Detail/Detail"; Vue.use(VueRouter)...

    动态路由

    在router文件中先定义路由

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    //主页
    import Home from '../views/Home'
    //详情
    import Detail from "@/views/Detail/Detail";
    Vue.use(VueRouter) //注册模块
    
    const routes = [
      {
        path:'/',
        redirect:'/home'// 重定向
      },
      {
        path: '/home',
        component:Home
      },
      {
        path:'/detail/:id',//动态路由
        name:'detail',
        component: Detail
      }
    
    ]
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router
    

    在这里插入图片描述
    需要动态传参的页面

    <template>
    <div>
      <ul>
        <li v-for="data in dataList" :key="data.id" @click="handClick(data.id)">
          {{data.title}}
        </li>
      </ul>
    </div>
    </template>
    
    <script>
    export default {
      data(){
        return{
            dataList:[
              {
                id:1,
                title:'张三'
              },
              {
                id:2,
                title:'李四'
              },
              {
                id:3,
                title:'王五'
              }
            ]
        }
      },
      methods:{
        //点击跳转详情页
        handClick(id){
          //this.$router.push(`/detail/${id}`) //编程式导航
          this.$router.push({
            name:'detail',
            params:{
              id
            }
          })
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    
    

    接受的页面

    <template>
    <div>deatil</div>
    </template>
    
    <script>
    export default {
      mounted() {
        //获取路由后面带的参数
        console.log(this.$route.params.id)
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    
    
    展开全文
  • vue动态路由的创建

    千次阅读 2019-04-17 09:53:19
    vue动态路由的创建 首先,需要后端的配合通过login拿到router的path;然后再组装每一个路由所需要的元素;比如title、children、component、meta等,其中最重要的就是children、component,尤其是component的组装...

    vue动态路由的创建

    • 首先,需要后端的配合通过login拿到router的path;然后再组装每一个路由所需要的元素;比如title、children、component、meta等,其中最重要的就是children、component,尤其是component的组装需要通过path指定到对应的.vue组件(item.component = () => import(’@/pages’ + item.path + ‘.vue’))。在这里插入图片描述1.外层菜单和layout全局样式;2.有二级菜单的VUE资源和HTML资源对应的文件路径;3.无二级菜单对应的文件路径;4.把登录成功后的菜单储存在本地浏览器(便于router–》index.js获取);在这里插入图片描述5.把登录成功需要跳转的menuList添加到$router中
    • 其次,在router–》index.js组装相应router所需元素(component特别重要);把组装的router放入总router中;在路由导航守卫中加载相应的menuList列表。在这里插入图片描述1.组装相应router;在这里插入图片描述2.相应router添加到总router中;在这里插入图片描述3.路由导航守卫加载相应menuList列表。
    • 最后,点击layout组件相应菜单组装相应router并添加到$router(ps:因项目而异本项目最左边只有三个固定菜单,若是动态菜单需遍历列表并组装相应router)。在这里插入图片描述
    展开全文
  • vue动态路由路由懒加载

    多人点赞 2021-06-28 16:33:26
    这种path和Component的匹配关系,我们称之为动态路由(也是路由传递数据的一种方式)。 1、配置router 2、使用路由 3、创造用户组件并使用传进来的用户信息 在compute中用this.$route.params.userId,...

    目录

    1、动态路由

    1、配置router

    2、使用路由

    3、创造用户组件并使用传进来的用户信息

    2、路由懒加载

    1、懒加载的方式

    2、懒加载举例


    1、动态路由(通过$route.params获得数据

    某些情况下,一个页面的path路径可能是不确定的,比如我们进入用户界面时,希望是如下的路径/user/aaaa/user/bbbb。p除了有前面的/user之外,后面还跟上了用户的ID。这种pathComponent的匹配关系,我们称之为动态路由(也是路由传递数据的一种方式)

    1、配置router

    2、使用路由

    1、用组件传递

    2、用函数代码传递

    3、创造用户组件并使用传进来的用户信息

    在compute中用this.$route.params.userId,但是mustache语法中直接$route.params.userId

    参考上面的message就是这样的

    2、路由懒加载

    1、懒加载的方式

    2、懒加载举例

    路由懒加载前

    路由懒加载后(打包后的js分成了多个部分,懒加载了Home和About其实就是把Home和About分成了另外两个js,当需要的时候才加载。)

    参考视频:

    https://www.bilibili.com/video/BV1H7411j7Mc?from=search&seid=10645859101733219162

    展开全文
  • vue动态路由配置

    千次阅读 2017-12-15 10:35:45
    最近写的一个项目,需要配置一个动态路由,就是路径调到一个页面上去,而且后面的参数是可传可不传的。废话不多说看代码…… 在index.js文件下export default new Router({ routes: [ { //根路由 path: '/', ...

    最近写的一个项目,需要配置一个动态的路由,就是路径调到一个页面上去,而且后面的参数是可传可不传的。废话不多说看代码……
    在index.js文件下

    export default new Router({
      routes: [
        {
          //根路由
          path: '/',
          redirect: '/home'
        },
        {
          //注册页(1)
          path: '/register',
          name: 'register',
          component: Register,
        },
        {
          //注册页(2)
          path: '/register/:id',
          name: 'register',
          component: Register,
        },
     ]

    你会发现我写了两个注册页面的路由,看//注册页(1)这里是不带参数的路由,//注册页(2)是带参数的路由,而且path: ‘/register/:id’ 路径后面加上:id 便是匹配任意的参数。最后两个路由的component: Register,一定要相同。这样一个动态的(可传可不穿传参数)路由就搞定了。

    展开全文
  • vue3.0路由注册

    2021-04-21 14:28:24
    vue3.0基础路由注册使用 注:使用vue-cli搭建起来的项目架构在引入vue-router时可能会因为默认的vue-router版本过低而导致报错 解决方法:cnpm install vue-router@next --save 第一步创建router.js文件 import { ...
  • vue动态路由加载组件,找不到module问题 vue动态加载路由并挂载到vue路由信息由后端给出,同时component的路径也是后端给出,但是动态加载该路径会报错。 原因:webpack 编译es6 动态引入 import() 时不能传入变量...
  • vue动态路由及案例

    2020-04-23 16:12:16
    动态路由 动态路由即符合某种模式的多个路径映射到同一个组件,动态路由的写法: import User from "./views/User.vue"; const routes = [ // id 就是路径参数 { path: '/user/:id', component: User } ] id 为路径...
  • vue动态路由刷新页面参数丢失问题

    千次阅读 2020-10-17 13:41:45
    例如我们在router.js中是这么写的 ...查阅相关文档后,发现vue有两种传参方式:params和query,正确的传参姿势应该是这样: params方式: query方式: 通过上面对比可以发现,params是和name配合使用,而
  • 默认前端只配置登陆、注册、主页等路由,其他路由登陆时从后台获取,动态生成菜单、路由渲染 2.问题 后台配置了组件全名如: @/layouts/RouteView 但是跳转时控制台报错,can't find module 'xxxx' 也就是...
  • vue动态路由加载组件时报报错, component = resolve => import(`@/views/${component}`) 这是以前的代码 这样写是没有问题的, 但是webpack4中动态import不支持变量方式,问题就来了 需要将import引入改为...
  • vue路由自动注册

    2020-12-08 17:44:59
    记录一下vue路由自动注册的一种方式 根据src/views文件夹的路径自动注册路由,文件结构如下: src |--view |----page1 // 页面一 |------components // 页面一的组件 |------index.vue // 页面一的入口组件 |----...
  • 1.router/index.js 保留基本路由 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) /* Layout */ import Layout from '@/layout' export const constantRoutes = [ { path: '/login', ....
  • 分析:动态路由写的没问题,大概是问题出在路由寻址时找不到具体的组件 解决:根据分析定位问题可能出在路由表上,仔细检查一下路由表,发现动态路由的参数没加,解决如下图: 加上尾巴上的参数:id,成功跳转显示...
  • vue 动态更改路由参数

    2020-08-21 09:36:31
    在main.js 文件中注册 merge//动态更改路由参数 import merge from 'webpack-merge'; Vue.prototype.$merge = merge 在需要的页面使用该功能 let name = data.name; let id = data.AreaId; //判断是否重复点击...
  • vue动态添加子路由

    2021-06-25 10:27:42
    本篇文章介绍vue如何添加子路由,及添加子路由的应用场景和操作代码。 动态添加子路由 动态添加子路由还是用addRoutes这个api来实现。 实现方式: 1、先通过路由树获取到当前根路由与当前路由。 /** * 因为...
  • vue 路由

    2021-01-08 14:30:08
    vue 路由 什么是路由 后端路由: 对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源; 前端路由: 对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,...
  • Vue路由

    千次阅读 多人点赞 2020-12-09 21:19:13
    Vue路由Vue路由基础嵌套路由路由重定向路由传参params形式传参query形式传参params方式与query方式的区别编程式路由利用JS实现路由跳转通过watch实现路由监听导航守卫 Vue路由基础 Vue属于单页应用(SPA),即整个...
  • Vue路由

    2018-09-12 00:58:33
    Vue路由 今天来看看vue怎么实现路由功能。 我们在vue-cil脚手架搭建好的基础上来实现路由功能。如果搭建完初始化项目时没有路由功能则需在npm安装路由。命令: npm install vue-router 然后在main.js中引用...
  • vue 动态插入子路由

    千次阅读 2019-06-04 10:00:41
    动态注册路由动态在new router中注册路由动态向router数组中添加路由。 let comment = [{path: '../../view/index/index.vue'}]; this.$router.options.routes[1].push({ path: '/' + __menu.name, name: __...
  • VUE路由实现注册登陆功能

    千次阅读 2020-03-19 13:46:52
    VUE实现注册登录功能 首先使用vue-cli创建一个vue项目,需要用到vue.js 路由,可以先命令行输入”npm install vue-router“进行安装。 (关于创建项目前那些工具内容介绍等这里不再赘述) 在这里我们每个组件都放在...
  • vue路由

    2020-03-28 21:36:43
    今天先写个对vue路由的理解,明天接着写vue兄弟组件通信方式 一、vue的路由是什么 在之前已经写过了express的路由理解,这两者本质都是一个中间件 //在这里查看express路由理解 二、vue路由结构 现在的应用都流行单...
  • Vue前端路由

    千次阅读 2020-11-04 14:10:11
    Vue 前端路由 1.路由的基本概念与原理 1.1路由 路由是一个比较广义和抽象的概念,路由的本质就是对应关系。 在开发中,路由分为: 后端路由 前端路由 1.后端路由 概念: 根据不同的用户URL请求,返回不同的内容 ...
  • 我们在用 Vue 开发过实际项目的时候都会用到 Vue-Router 这个官方插件来帮我们解决路由的问题。Vue-Router 的能力十分强大,它支持 hash、history、abstract 三种路由方式,提供了 <router-link> 和 <...
  • vue学习之VueRouter 路由

    2021-08-27 14:27:35
    2、前端路由的规则2.1、URL的hash 方式2.2、HTML5的history模式3、route-view的基础3.1 认识vue-router3.2、安装和使用vue-router3.3、路由的默认路径3.4、HTML5的history模式3.5、router-link补充3.6、动态路由4、...
  • Vue 路由

    千次阅读 多人点赞 2019-08-03 10:35:17
    Vue 路由 SPA 1. SPA是什么? 单页Web应用(single page application,SPA),就是只有一个Web页面的应用, 是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的Web应用程序 单页面应用程序: 只有 第一次...
  • 什么是路由?网络原理中,路由指的是根据上一接口的数据包中的IP地址,查询路由表转发到另一个接口,它决定的是一个端到端的网络路径。web中,路由的概念也是类似,根据URL来将请求分配到指定的一个'端'。(即根据...
  • VUE路由vue-router) ...• Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌 • 路由:一个路径对应一...• 注册路由配置表 • 把路由挂在在根实例上 vue-rout...
  • Vue路由vue-router

    2020-07-20 18:01:03
    Vue路由vue-router前言1. 什么是路由2. 基本使用2.1 引入vue-router2.2 创建组件模板2.3 VueRouter实例2.4 vm实例绑定2.5 页面跳转控制3. 重定向4. 高亮处理 前言 由于Vue在开发时对路由支持的不足,于是官方...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,283
精华内容 9,313
关键字:

vue动态路由注册

vue 订阅