精华内容
下载资源
问答
  • 主要介绍了vue-cli 默认路由再子路由选中下的选中状态问题及解决代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 首先在你想要实现伪静态的页面的路由规则中配置,如: { path: "/Detail/:id", name: "Detail", compontent: ...... } 这里是给 Detail 这个页面的路由中配置一个参数 id,这个参数是 parmas 参数,传递的方式有...

    想要实现伪静态,路径后面加上 .html 后缀,可以通过动态路由来实现。
    首先在你想要实现伪静态的页面的路由规则中配置,如:

    {
    	path: "/Detail/:id",
    	name: "Detail",
    	compontent: ......
    }
    

    这里是给 Detail 这个页面的路由中配置一个参数 id,这个参数是 parmas 参数,传递的方式有两种

    this.$router.push({name: "Detail",params: {id: 9}})	//注意参数名得和路由规则中配置得一致,否则不会显示在路径里
    this.$route.push("/Detail/9")
    

    在 Detail 页面的 $route.params 里获取到传递过来的参数,这种 params 参数即使页面刷新或者前进后退都不会丢失。
    要实现伪静态则是,将我们要传递的参数后面加上 “.html”,即

    this.$router.push({name: "Detail",params: {id: '9.html'}})
    

    这样路径就是 …/Detail/9.html ,我们拿到的参数就是 9.html ,我们再去掉后面的 .html 就得到了参数 id 了

    注意这里有个坑,如果你的项目是部署在子路径下,也就是 vue.config.js 中配置了 publicPath:’./’ ,而且你的路由模式又是 history 模式,那么使用动态路由的页面,刷新就会报错

    Uncaught SyntaxError: Unexpected token <
    

    这是因为vue-cli 的publicPath默认是/,它会假设应用被部署到一个域名的根目录上,当被部署到一个子路径时,需要修改为:/子路径/
    解决方法:将 publicPath 配置为 ‘/’ 重启项目即可,打包上传时再修改为 ‘./’

    展开全文
  • Vue-cli4路由配置的一些理解

    热门讨论 2021-06-19 16:09:12
    vue-cli4 路由配置 文章目录vue-cli4 路由配置前言-vue路由一、最基本路由配置1.配置router/index.js2.配置App.vue二、路由懒加载技术三、路由嵌套四、动态路由1.动态路由配置2.动态路由传参总结 前言-vue路由 Vue-...

    vue-cli4 路由配置


    前言-vue路由

    Vue-router是Vue官方的路由插件,与Vue.js深度集成.
    在使用了vue-router的单页面应用中,url的改变会引起组件的切换,从而达到页面切换的效果,所以如何让URL按照我们的意愿去改变和URL改变后页面去向何处是配置vue-router的两大问题.

    [SPA网页]前端渲染使得单页面富应用的SPA页面得以实现,整个网页只有一个HTML页面,静态资源服务器里只有一套HTML & CSS,甚至只有一套JS.

    [富应用] 得以实现依赖于发送至服务端的一个新的请求URL从服务器中获取到资源后,前端路由会负责分配资源给页面的相应组件;

    [单页面] 的实现需要url在前端改变,前端路由出现后,前端路由会根据router的监听,从映射关系里找到需要改变的部分,抽取分配新的资源,并仅仅重新渲染需要改变的部分;

    一、基本路由配置

    首先得安装vue-router,怎么装就不说了…
    在我们安装vue-router成功后,项目文件的src内会出现一个"router"文件夹,这个文件夹内会有一个index.js,对router的配置就主要在这里完成了.
    在这里插入图片描述
    打开它,然后在 routes 数组中进行配置,一个页面的路由在这个数组里被集合为一个对象,其内部包括path和component等属性,对应着URL怎么样改变会做出怎样的反应;

    1.配置router/index.js

    //这是在index.js;
    import { createRouter, createWebHistory } from 'vue-router'
    import Home from '../views/Home.vue'
    
    const routes = [
       //在此处配置路由;
    ]
    //在router4中使用createRouter替代了new VueRouter;
    const router = createRouter({ 
      history: createWebHistory(process.env.BASE_URL),
      routes
      //在此处引入所有页面的路由配置数组routes;
    })
    
    export default router   
    //导出包含着所有路由配置的router对象,
    //在main.js中注入后供全局使用;
    

    component属性:值为一个页面,这个页面需要提前import引入.

    path属性:规定URL内出现什么时跳转到component属性对应的页面.

    //这是在router/index.js,末尾部分略去;
    import { createRouter, createWebHistory } from 'vue-router'
    import Home from '../views/Home.vue'
    import About from '../views/About.vue'
    import News from '../views/News.vue'
    //引入3个页面控件;
    const routes = [
        {
            path: '/',  /* 规定初始URL对应的默认的页面 */
            name: 'Home',
            component: Home   /* 规定默认在Home页面 */
       },
       {
            path: '/about',/* 规定URL新增段为/about时跳转 */
            name: 'About',
            component: About  /* 跳转至About */
       },
       {
            path: '/news', /* 规定URL新增段为/news时跳转 */
            name: "News",
            component: News  /* 跳转至News */
       },
    ]
    

    2.让路由改变

    前面规定好了url改变为不同字符时会怎样进行跳转,现在得想想怎么才能让URL改变了,以我们的方式改变.
    我们需要使用router-link标签,其自带的to属性可以帮我们完成这一操作,
    认识两种新的标签,他们已经在全局注册过了.

      <router-link to="要在URL上添加的字符">XXX</router-link>
      //<router-link>默认会被渲染成为<a>;
      <router-view />
      //这俩不需要组合使用,但是要组合也可以;
    

    < router-view>是一个占位标签,它规定了router-link标签需要显示在什么位置
    ,总之你删了它,router-link渲染出来的标签就显示不了了(那都不重要,我们先说路由吧…).

    <template>
      <div id="nav">
      <!-- to属性规定如何改变URL; -->
      <!-- Tag属性规定router-link标签需要被渲染成什么HTML元素; -->
        <router-link to="/" Tag="a">Home页面</router-link> |
        <router-link to="/about" Tag="a">About页面</router-link> |
        <router-link to="/news" Tag="a">News页面</router-link> |
        <router-link to="/login" Tag="a">Login</router-link>
      </div>
    </template>
    

    然后你就可以npm run serve跑起你的项目来看看了;
    在这里插入图片描述
    可以看到依据Tag属性的规定是多了4个a标签的,我们点进去News看下,
    在这里插入图片描述
    URL依据router-link的to属性的值改变了,页面正确的跳转.
    到此基本的路由配置就完成了.

    另外你也看到router-link还有一个tag属性,你可以使用这个属性来规定router-link标签被渲染成什么元素.


    二、路由懒加载技术

    把不同的路由对应的组件分离,仅当某路由被触发时才会加载对应组件,会更加高效,并且第三方 & 底层支撑 & 公共App 除外, 其他的Vue页面组件都在服务器,随用随请求,确保对页面的影响最小.

    其实就是改变一下router/index.js里对各个组件的引入方法啦…
    通过箭头函数的方法进行.

    const routes = [
      {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue')
        //直接在这里引入了About并且赋值给了component;
      },
      {
        path: '/news',
        name: "News",
        component: () => import("../views/News.vue")
            //直接在这里引入了About并且赋值给了component;
      },
      {
        path: '/login',
        name: 'Login',
        component: () => import('../views/Login.vue')
            //直接在这里引入了About并且赋值给了component;
      },
    ]
    
    

    三、路由嵌套

    我们的子页面在运作时可能会需要点击替换某个部分? 用户通过App.vue进入了一个子页面,点击了查看详情我们可能会需要把某个部分替换为详情界面,改变页面某个部分的内容,这时候会需要路由嵌套技术.

    说简单些,就是在父页面的路由里规定子页面的路由,比如在News.vue的路由里规定NewsChild-1.vue的路由.

    //这是缩减过的router/index.js;
    const routes = [
      {
        path: '/news',
        name: "News",
        component: () => import("../views/News.vue"),
        children: [
          {
            path: 'NewsChild-1', 
            //子路由不用在前面写"/"和上一层路径,
            //但其实解析是是会加上的;
            //规定URL出现/News/NewsChild-1时,
            //跳转至component对应的页面;
            component: () => import("../views/NewsChild-1"),
          }
        ]
      },
    ]
    

    这样就规定了在News页面出现URL改变后应当进行的操作.
    自然,我们还得规定News页面下要怎样改变URL,进入News.vue进行操作.

    <!-- 这是News.vue; -->
    <template>
      <h1>News</h1>
      //规定在被触发时URL增加/News/NewsChild-1;
      <router-link to="/News/NewsChild-1">NewsChild-1</router-link>
      <router-view></router-view>
    </template>
    

    然后来看下渲染出的页面吧:
    在这里插入图片描述
    点击链接NewsChild-1:
    在这里插入图片描述
    URL变为/News/NewsChild-1,依据router-link的to属性值.
    大可再在children数组里多嵌套几个页面组件,如法炮制即可.


    四、动态路由

    很多时候页面需要跳转到哪里是不能由我们写程序的来确定的,这就需要程序按照需求去自己决定,让路由得以动态改变.

    1.动态路由配置

    说简单些,我们不把[to需要增加的URL]和[path判定跳转的URL]写死就好了,把URL里需要经常变化的部分,利用v-bind与export default中的data数据互通起来,让URL跟随数据变动.

    //这是在router/index.js
    import { createRouter, createWebHistory } from 'vue-router';
    
    const routes = [
      {
        path: '/',
        name: 'Home',
        component: () => import('../views/Home.vue'),
      },
      {
      //我们在此处也不要把path的值写死;
        path: '/user/:userId',
        name: 'User',
        component: () => import('../views/User.vue'),
      }
    ];
    
    <!-- 这是在App.vue里 -->
    <template>
      <div id="app">
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link> |
        <!-- 在此处使用v-bind将userId数据调用; -->
        <!-- 将/user/作为字符串拼接给userId -->
        <router-link v-bind:to="'/user/' + userId">用户</router-link>
      </div>
      <router-view />
    </template>
    <script>
    export default {
      name: "app",
      data() {
        return {
        //在此处设定userId的数据为baixia;
          userId: "baixia",
        };
      },
    };
    </script>
    
    

    来看下效果:
    在这里插入图片描述
    接下来点击用户:
    在这里插入图片描述
    URL成功拼接了了data里的数据UserId,即baixia.

    2.动态路由传参

    动态路由也是Vue传递数据的方式之一,利用$route来进行Vue页面组件(即vue文件)间的通信.
    先来认识两个变量:
    $router: index.js末尾利用createRouter创建的路由对象
    $route: 当前正处于活跃状态下的路由对象,其中有一个params属性,全称parameters,利用它,可以取到我们URL里使用v-bind传的值.

    比如User.vue需要获取App.vue的data中的userId数据:

    <!-- 在App.vue中(发方) -->
    <template>
      <div id="app">
        <router-link v-bind:to="'/user/' + userId">用户</router-link>
      </div>
      <router-view />
    </template>
    <script>
    export default {
      name: "app",
      data() {
        return {
          userId: "baixia",
        };
      },
    };
    </script>
    
    //在user.vue中(收方)
    export default {
        name:"user",
        computed: {
            userId() {
                return this.$router.params.userId
    //将this.$router.param.userId的值,
    //即App.vue的router-link里传入的userId返回,
    //以作为计算属性userID()的值
            }
        }
    }
    

    User.vue里为了获取用户信息而使用的params,其获取哪个属性依赖于index.js里的path,的如果path:’/user/:abc’,那么User.vue的< script>里应当为:

    export default {
        name:"user",
            computed: {
                userId() {
                //这里也应为获取abc属性;
                    return this.$router.params.abc
               }
            }
    }
    

    2021.9.22补档-路由模式:

    忘记说路由模式了,现在用的有三种模式:HTML5history模式,hash模式和abstract模式,前两种用的格外多一点,我就多说前面两种了:

    1.VUE3.0history模式

    import { createRouter, createWebHistory} from 'vue-router';
    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes
    });
    

    你可以在这个地方使用history属性来规定路由使用的模式,使用history模式和hash模式并不会对你的其他组件什么的造成影响,你可以规定一种模式并做完项目后再改动路由模式,不会出现什么进不去页面之类的乱七八糟的情况.

    那这俩模式有什么不同呢?

    history模式的使用会使得在浏览器上方的路由更加的美观,不会有什么"%""#"之类乱七八糟的东西掺杂在里面,而且页面的SEO会得到提高.

    但是这样的路由发到服务器就不太好了,服务器一看"这是什么玩意啊也不符合规则."
    所以是请求不到东西的,会返回404,这种情况需要服务端做一些配置来解决(时间紧就直接换回hash模式吧,不会有什么后遗症的).

    当然,方法不唯一,也有方法是在打包的时候在webpack.config里进行特殊配置,我没有试过,这里外链一下大神写的,自己去看吧:
    解决history路由模式下返回404

    总结

    以上是我据本阶段的学习得出的一些经验,如果帮到了您,我很高兴;
    若是您发现了不足,您可以在评论区指出, 我会感谢您的指点!

    展开全文
  • vue基础精讲组件/路由/vuecli4 多年一线互联网开发实战以及培训经验...

    扫码下载「CSDN程序员学院APP」,1000+技术好课免费看

    APP订阅课程,领取优惠,最少立减5元 ↓↓↓

    订阅后:请点击此处观看视频课程

     

    视频教程-vue基础精讲组件/路由/vuecli4-PHP

    学习有效期:永久观看

    学习时长:719分钟

    学习计划:12天

    难度:

     

    口碑讲师带队学习,让你的问题不过夜」

    讲师姓名:lampol

    CTO/CIO/技术副总裁/总工程师

    讲师介绍:多年一线互联网开发实战以及培训经验,对php开发,linux运维架构有丰富的经验,善于分析问题,解决问题。

    ☛点击立即跟老师学习☚

     

    「你将学到什么?」

    主要讲了vue的各种基础语法知识

    vue组件  组件的通信

    vue指令 使用

    vue动画过渡

    后台api请求 axios使用

    vuecli4安装使用

    vue-router路由安装使用

     

    「课程学习目录」

    第1章:vue介绍以及安装使用
    1.vue介绍以及与其他框架对比
    2.vue特点以及mvc-mvp-mvvm介绍
    3.vue编辑器hbuilderx安装
    4.vue安装以及简单使用
    第2章:vue实例data插值语法
    1.vue实例以及el-data使用介绍
    2.vue插值语法使用
    第3章:vue指令使用
    1.vue指令之v-bind使用
    2.vue指令之v-on使用
    3.vue实战demo放大缩小字体
    4.vue指令之v-model使用
    5.v-model指令实战demo
    6.vue指令之条件渲染
    7.vue指令之列表渲染使用
    8.vue指令列表渲染demo实例
    第4章:生命周期计算属性侦听器
    1.vue生命周期钩子函数介绍使用
    2.vue计算属性使用
    3.vue之侦听器watch的使用
    4.demo实战商品价格实时计算
    第5章:vue组件使用
    1.组件介绍以及组件定义
    2.data必须是函数一个根节点局部注册
    3.父子组件的定义
    4.父子组件通信传值
    5.实战文章列表页
    6.自定义事件子组件与父组件通信
    7.vue组件之插槽具名插槽使用
    8.vue组件之动态组件使用
    9.keep-alive以及生命周期函数使用
    第6章:vue之过渡动画
    1.单元素过渡以及钩子使用
    2.多元素过渡以及mode使用
    3.vue之多组件过渡
    4.vue之列表过渡
    5.vue之自定义过渡animate使用
    第7章:vue之axios安装使用
    1.axios介绍以及引入使用
    2.箭头函数以及this指向
    3.axios发送get请求带参数
    4.axios发送post请求
    第8章:vuecli4安装使用(一)
    1.node-vuecli4安装
    2.vue创建项目及目录介绍
    3.vue项目启动及编辑器使用
    4.import及export介绍
    5.Vue实例语法解释
    6..vue扩展文件介绍
    7.单文件组件全局注册及局部注册
    8.vuecli4图片地址引入几种方式
    第9章:vuecli4安装使用(二)
    1.vuecli4样式css的引入
    2.vuecli4安装axios以及使用
    3.vuecli4配置config跨域
    4.vuecli4环境变量使用
    5.vuecli4项目构建以及部署
    第10章:vue之vue-router路由使用
    1.vuecli4安装vue-router
    2.vue-router实现导航效果
    3.vue-router声明式导航
    4.声明路由动态路由路由传参
    5.vue-router之嵌套路由的使用
    6.vue-router过渡动画导航选中路由重定向
    7.vue-router之全局守卫及组件守卫

     

    7项超值权益,保障学习质量」

    • 大咖讲解

    技术专家系统讲解传授编程思路与实战。

    • 答疑服务

    专属社群随时沟通与讲师答疑,扫清学习障碍,自学编程不再难。

    • 课程资料+课件

    超实用资料,覆盖核心知识,关键编程技能,方便练习巩固。(部分讲师考虑到版权问题,暂未上传附件,敬请谅解)

    • 常用开发实战

    企业常见开发实战案例,带你掌握Python在工作中的不同运用场景。

    • 大牛技术大会视频

    2019Python开发者大会视频免费观看,送你一个近距离感受互联网大佬的机会。

    • APP+PC随时随地学习

    满足不同场景,开发编程语言系统学习需求,不受空间、地域限制。

     

    「什么样的技术人适合学习?」

    • 想进入互联网技术行业,但是面对多门编程语言不知如何选择,0基础的你
    • 掌握开发、编程技术单一、冷门,迫切希望能够转型的你
    • 想进入大厂,但是编程经验不够丰富,没有竞争力,程序员找工作难。

     

    「悉心打造精品好课,12天学到大牛3年项目经验」

    【完善的技术体系】

    技术成长循序渐进,帮助用户轻松掌握

    掌握PHP知识,扎实编码能力

    【清晰的课程脉络】

    浓缩大牛多年经验,全方位构建出系统化的技术知识脉络,同时注重实战操作。

    【仿佛在大厂实习般的课程设计】

    课程内容全面提升技术能力,系统学习大厂技术方法论,可复用在日后工作中。

     

    「你可以收获什么?」

    熟练vue语法

    vue组件使用

    vuer-router使用

    vuecli4使用

     

    展开全文
  • 因项目需求,需要在默认路由下面的两个子路由进行切换,当开始以为不就是路由切换?so easy!想象很丰满,现实很骨感!那就看一下遇到的问题吧! {path: '/',component: resolv...

    因项目需求,需要在默认路由下面的两个子路由进行切换,当开始以为不就是路由切换?so easy!想象很丰满,现实很骨感!那就看一下遇到的问题吧!

    {path: '/',component: resolve => require(['@/components/LiveList'],resolve),
        	children:[
            {
        		path:'',
        		name:'livelist',
        		meta:{title:'',index:0},
        		component: resolve => require(['@/components/compts/livelistcom'],resolve)
        	},{
        		path:'livenew',
        		name:'livenew',
        		meta:{title:'',index:1},
        		component: resolve => require(['@/components/compts/livelistnew'],resolve)
        	}]
     },
    {
        path:'/user',
        name:'user',
        meta:{title:'用户',index:4},
        component: resolve => require(['@/components/user'],resolve)
    },
    

    这路由一看没问题吧!

    <router-link to="/"><p>首页</p></router-link>//这是底部的切换路由
    //下面两个便是首页下面的两个子路由的跳转了
    <li><router-link to="/">热门</router-link></li>
    <li><router-link to="/livenew">最新</router-link></li>

    看到上面的代码是不是没有发现错误?其实也的确可以运行!而且两个子路由切换关于首页的状态也是没有问题的!

    但是当我切换user路由的时候发现,首页路由的状态依旧是选中状态,这个让我很纳闷,按理说user路由跟首页的路由是同级,不出出现这样的问题。既然出现了,为了工作,只能迎难而上,去解决这个问题。

    在经过我仔细的查找文档,终于想到了一种解决方案:在官方文档里面有一个redirect(重定向)https://router.vuejs.org/zh/guide/essentials/redirect-and-alias.html#重定向点击链接可以查看官方文档

    既然可以重定向那我就试一下这种来解决(毕竟上面的代码和逻辑事再想不出是什么地方出的错误,还望大神指点一二!!!)

    废话不多说,直接先解决后的代码:

        {path:'',redirect: '/index'},
        {path: '/index',component: resolve => require(['@/components/LiveList'],resolve),
        	children:[
            {path:'',redirect:'livelist'},
            {
        		path:'livelist',
        		name:'livelist',
        		meta:{title:'',index:0},
        		component: resolve => require(['@/components/compts/livelistcom'],resolve)
        	},{
        		path:'livenew',
        		name:'livenew',
        		meta:{title:'',index:1},
        		component: resolve => require(['@/components/compts/livelistnew'],resolve)
        	}]
        },
        {
            path:'/user',
            name:'user',
            meta:{title:'用户',index:4},
            component: resolve => require(['@/components/user'],resolve)
        }

    而关于路由的跳转也有一些小变化:

    <router-link to="/index"><p>首页</p></router-link>//这里依旧是底部导航
    //这里便是首页的两个子路由的跳转按钮了
    <li><router-link to="/index/livelist">热门</router-link></li>
    <li><router-link to="/index/livenew">最新</router-link></li>
    

    构思:用重定向,规定默认路由跳转到上面 /index 下面默认的子路由,再由默认的子路由去定向到子路由的 livelist 。(这是在解决问题的时候发现,非默认路由下,子路由切换不会造成默认路由选中不取消的问题,而默认路由一直会存在一个router-link-active的类名,我的选中样式也是基于它的

    关于选中时自定义自己的样式可以操作.router-link-active 这个类,而默认路由一直存在这个类,如果没有子路由,或者子路由选中不需要显示父路由也为选中状态的情况下,你可以操作.router-link-exact-active这个类来写自己的选中样式。


    展开全文
  • vuecli3路由传参的方式

    2020-10-17 16:34:09
    想要使用params传参首先要配置路由 这个是配置组件 { // : id 这个是要传的参数 path: '/about/:id', name: 'About', component:About } 父组件中 <!-- 字符串拼接 绑定动态数据 --> <router-link :...
  • vue-cli 嵌套路由

    千次阅读 2019-07-07 23:05:47
    在router目录下的index.js路由配置文件里使用children嵌套路由,如下: 嵌套路由配置好,就需要在嵌套的页面展示被嵌套的页面了 router-view 为什么写这?因为刚在配置路由的时候是在child下配置的呀。 效果如下:...
  • vue-cli嵌套路由

    千次阅读 2018-04-26 14:56:02
    正常的路由,我之前就给大家介绍过,今天来给大家介绍嵌套路由 这就是嵌套路由的写法, 有的人会问,resolve是啥...我这里没用router-link,不理解this.$router的同学可以去看看我的vue路由博客,这是子路由的写法...
  • Vue-cli4——vue-router路由

    千次阅读 2020-11-18 13:34:27
    Vue-cli4——vue-router路由(一) Day1 文章目录Vue-cli4——vue-router路由(一)前言一、代码解析1.1 src/router/index.js1.2 src/App.vue二、实例2.1 简单的实例2.2 在网页中不显示#号2.3 重定向2.4 router-...
  • VUE CLI 打包build项目, 发布到github pages ,子路由刷新报错404 [ vue-router 里 mode: 'history' ]解决方法问题1: 首页正常, 在子路由页面刷新报错问题2: 访问首页 css js等资源文件404找不到问题3: https页面上 ...
  • 目录 1、安装 路由组件的设定-仅两步 ...VUE CLI可以选择安装,如果没有安装则运行以下命令 $ npm install vue-router --save --save-exact 路由组件的设定-仅两步 1、src/router/index.js ---...
  • 问题1: 首页正常, 在子路由页面刷新报错npm build 后 生成dist文件夹, 将里面的全部内容放置到 本身新建的github Pages 项目里面,首页正常访问, 能经过首页按钮进入子路由, 可是在子路由页面 F5刷新当前页,报错404...
  • YDOOK:vue3:vue-cli4: vue的两种路由导航方式 © YDOOK JY Lin 1. 《router-link》标签式导航: 《router-link :to="/path"》(这里可以定义其他div)《/router-link》 1. 代码举例: , route, navigate, isActive, ...
  • Vue-cli4.0路由的配置

    千次阅读 2020-11-02 19:36:36
    (1)子路由不需要再写/ (2)如果需要传值 path写成 path: ‘product/:id’,形式 (3)一般都写一个home父模板 其他往里填 // 拉取依赖 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(Vue...
  • vue-cli路由配置

    2019-05-07 08:45:45
    vue-router配置子路由 路由嵌套使用时要在父级菜单中使用 标签 的作用是为子组件提供插入位置, 也可以设置一些css样式。 配置子路由需要在父组件的路由配置中加入 children 字段,具体使用方法如下: ...
  • 路由嵌套 即在某个组件内,再通过路由嵌套子组件...1、创建对应的子组件,并在路由映射中配置对应的子路由 类似Home.vue新建HomeNews.vue和HomeMessage.vue组件 在router的index.js中以懒加载的方式引入 const Hom
  • vueCli笔记

    2020-06-05 10:17:57
    什么是VueCli? Cli是Command-Line Interface,即命令行界面,俗称脚手架。 Vue Cli是官方发布Vue.js项目的脚手架,通过它我们可以快速搭建Vue开发环境以及对应的webpack配置. 如果想要使用VueCli,就需要安装有NodeJs...
  • Vue-cli项目中路由的基础用法 文件目录 编辑router文件夹下的index.js文件 第一步:引用vuevue-router ,Vue.use(VueRouter) /* eslint-disable*/ import Vue from 'vue' import Router from 'vue-router' ...
  • Vue--vuecli4使用axios,及解决跨域问题

    千次阅读 2020-03-23 23:57:48
    Vue–vuecli4使用axios,及解决跨域问题 使用版本 vue-cli 4.1.2 VScode 1.42.0 问题一、配置问题(根据此配置,可避免跨域问题) 我配置访问后台路径时,发现vue-cli4已经没有了config/index.js文件,只有一个vue...
  • 2.查看自己是不是vuecli2的,如果是则需要删除 vue --version 3.输入命令创建项目 vue create text-project 4.按上下键选择Manually select features(手动选择功能)项,default (babel, eslint)(默认安装) 5....
  • vue-cli中使用路由

    2018-06-01 15:31:18
    1.前言:把一些细节记录下来,毕竟只有一个人和整个世界呢~参考文档:https://www.cnblogs.com/GainLoss/p/6795225.html2.实现细节:在组件中实现跳转链接,在js事件中使用this.$router.push("/test");...
  • vue-cli3与路由懒加载的坑

    千次阅读 2019-04-17 11:00:07
    当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。...于是最近在用vue-cli3做项目的时候就入坑了,虽然不习惯,但是vue-cli3相比之前更加灵活了! 言归正传,下边开始踩坑… export const async...
  • 构建一个完美的前端页面,我们首先要考虑整个页面区域的划分,然后根据不同的地址,往区域中塞入想要表达的内容,这个时候就需要用到前端路由了。这个路由不是放射wifi的路由器,而是前端进行页面转换的利器。前端...
  • 文件目录:   编辑router文件夹下的index.js文件 · 第一步:引用vuevue-router ,Vue.use(VueRouter) .../* eslint-disable*/ import Vue from 'vue' ...·第二步:引用定义好的路由组件 import Ch...
  • YDOOK:vue3:vue-cli4: 嵌套路由的基本配置用法 router 高级路由教程 © YDOOK JY Lin 1. 非嵌套情况下,vue router 路由的基本配置: 1.1 首先,要定义组件,设置 router-view 即路由的入口: <div id="app"> ...
  • 2. 使用vue-cli 2 创建一个项目(可以安装router也可以不安装) 如果在创建项目时安装了router,创建好的项目在src目录下会多出来一个router目录,可以在该目录下的index.js中对具有进行设置 3. 使用vue-router ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,401
精华内容 2,960
关键字:

vuecli4子路由

vue 订阅