精华内容
下载资源
问答
  • 分享两个解决方案 —— Vue 路由配置的模块化(Plan A and Plan B) 注册需要 首先路由注册需要啥 // main.js new Vue({ el: '#app', router, store, components: { App }, template: '<App>' }) // 这里的 ...
  • 主要介绍了vue 路由meta 设置导航隐藏与显示功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue路由配置

    2018-02-05 14:58:24
    vue路由配置,实现网页页面转换无刷新,使用vue进行web开发性能优化......
  • VUE history模式下的VUE示例 跨越微信五个支付目录限制的Nginx配置 VUE打包上线后的Nginx配置 配合我的文章说明使用, 效果更佳哦 文章: VUE history模式, 后端配置, 微信支付目录限制
  • Vue 路由配置参数说明

    2021-03-31 15:30:57
    /** * Note: sub-menu only... * hidden: true if set true, item will not show in the sidebar(default is false) 如果设置为true,则项目将不会显示在侧边栏中(默认为false) * alwaysShow: true if set true, wi
    /**
     * Note: sub-menu only appear when route children.length >= 1
     *
     * hidden: true                   if set true, item will not show in the sidebar(default is false)   如果设置为true,则项目将不会显示在侧边栏中(默认为false)
     * alwaysShow: true               if set true, will always show the root menu                        如果设置为true,将始终显示根菜单
     *                                if not set alwaysShow, when item has more than one children route, 如果不始终设置Show,则当项具有多个子路由时
     *                                it will becomes nested mode, otherwise not show the root menu      它将成为嵌套模式,否则不显示根菜单
     * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb               如果设置为no redirect,则breadcrumb中不会重定向
     * name:'router-name'             the name is used by <keep-alive> (must set!!!)                     名称由<keep alive>使用(必须设置!!!)
     * meta : {
        roles: ['admin','editor']    control the page roles (you can set multiple roles)                 控制页面角色(可以设置多个角色)
        title: 'title'               the name show in sidebar and breadcrumb (recommend set)             侧边栏和面包屑中显示的名称(推荐集)
        icon: 'svg-name'             the icon show in the sidebar                                        图标显示在侧栏中
        noCache: true                if set true, the page will no be cached(default is false)           如果设置为true,则不会缓存该页(默认为false)
        affix: true                  if set true, the tag will affix in the tags-view                    如果设置为true,则标记将粘贴在“标记”视图中
        breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)   如果设置为false,则该项将隐藏在breadcrumb中(默认为true)
        activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set            如果设置路径,侧边栏将突出显示您设置的路径
      }
     */
    
    展开全文
  • 主要给大家介绍了关于vue路由教程之静态路由的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 主要介绍了Vue结合路由配置递归实现菜单栏,本文通过实例代码给大家介绍的非常详细,对大家的学习火锅工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 路由设置:router/index.js export default new Router({ routes: [ { path: '/selfcenter', name: 'selfcenter', meta: { requireAuth: true // 配置此条,进入页面前判断是否需要登陆 }, component: ...
  • 主要介绍了vue-router为激活的路由设置样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 下载路由 cli生成的项目勾选下载过的就不用再下了...配置路由文件 import Vue from 'vue' import Router from 'vue-router' import Index from '@/components/index' Vue.use(Router) export default new Route...

    下载路由

    cli生成的项目勾选下载过的就不用再下了

    `npm install vue-router`
    

    配置路由文件

    import Vue from 'vue'
    import Router from 'vue-router'
    import Index from '@/components/index'
    
    Vue.use(Router)
    
    export default new Router({
    routes: [
        {
        path: '/',
        component: Index,
        meta:{
            title:'首页'
        }
        }
    ]
    })
    

    main.js文件内引入路由

    `import router from './router'`
    

    将下面的代码复制到main.js内

    // 自定义组件标题
    router.beforeEach((to, from, next) => {
      if (to.meta.title) {
        document.title = to.meta.title
      }
      next()
    })
    

    将路由挂载到vue实例上

    new Vue({
      el: '#app',
      router,//路由挂载
      store,
      components: { App },
      template: '<App/>'
    })
    
    展开全文
  • vue设置路由缓存

    2020-07-28 20:52:51
    Vue路由开启keep-alive缓存页面 mode:hash模式下: HTML部分: 1 2 3 4 5 6 7 8 <template> <div id="app"> <keep-alive> <!--使用...

    Vue路由开启keep-alive缓存页面

    mode:hash模式下:

    HTML部分:

    1

    2

    3

    4

    5

    6

    7

    8

    <template>

      <div id="app">

       <keep-alive>     <!--使用keep-alive会将页面缓存-->

        <router-view v-if="$route.meta.keepAlive"></router-view>

       </keep-alive> 

         <router-view v-if="!$route.meta.keepAlive"></router-view>

      </div>

    </template>

     路由部分:

    1

    2

    3

    4

    5

    6

    7

    8

    {

        path: '/home',

        name: '首页',

        menuShow: true,

        iconCls: 'home_light.svg',

        component: Home,

        meta:{keepAlive:true}

    }<br>页面部分:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    //缓存页面

    beforeRouteLeave(to, from, next) {   

       // 设置下一个路由的 meta

        to.meta.keepAlive = true// B 跳转到 A 时,让 A 缓存,即不刷新(代码写在B页面)

        next();

       }

     

     

     

    //不缓存页面

    beforeRouteLeave(to, from, next) {   

       // 设置下一个路由的 meta

        to.meta.keepAlive = false// B 跳转到 A 时,让 A 不缓存,即刷新(代码写在B页面)

        next();

       }

    展开全文
  • routes 写成 router了 所以没显示

    routes 写成 router了 所以没显示
    在这里插入图片描述

    展开全文
  • 1. router-link 1. 不带参数 <router to={path:> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',...// 路由配置 path: /home/:id 或者 path: /home:id
  • 以前在单页面路由中,就只能在html文件中定一个固定的网站的title。如果想要动态的去修改,需要使用如下的方法。 document.title = '这是一个标题'; 这样会让我们做很多无用功。显得十分蠢。 使用Vue-Router的方法 ...
  • 主要介绍了vue动态路由配置vue路由传参的方式,文中给大家提到了router-link这个组件的相关知识,需要的朋友可以参考下
  • vue二级路由设置方法

    2020-08-28 01:06:54
    下面小编就为大家分享一篇vue二级路由设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 路由配置中节点的所有子节点设置hidden为true,但该节点设置hidden为false,会出现以上情况! 1. 尝试配置总是展开 2. 都设置为true
  • 1.定义路由组件 在compoents文件夹下定义路由组件,如:HelloWorld.vue ...3.配置路由(index.js) const routes = [ { path: '/', redirect:'login' //重定向 }, //一级路由 { path: '/HelloWorld', name.
  • const router = new VueRouter({ ... }) // 路由守卫 router.beforeEach((to, from, next) => { // ... }) 方法二:当我们使用的是export default 方法时可以在main.js中添加 router.beforeEach((to, from, next) ...
  • 这里先来说,在vue项目中,如何写路由配置,更利于未来可扩展。 vue-router的基本配置 为了方便新学者的阅读与理解。先来看一下最基本的路由是如何配置的 // 0. 导入VueVueRouter脚本,如果使用模块化机制编程...
  • 今天小编就为大家分享一篇关于vue路由缓存清除在main.js中的设置,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue路由配置,vue子路由配置

    千次阅读 2019-10-05 16:16:45
    上一篇关于vue环境配置已经写好了!按照操作就行了!...首先找到路由配置文件 router>index.js,是整个项目路由配置文件 首先看最上面的,这个模块引入,ES2015中的import...from...将你需...
  • 最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;...//这个组件对应的路由配置 {  //组件路径 path: '/admin',  //组件别名 name: 'admin',  //组件名
  • Vue路由设置 个人总结

    千次阅读 2018-10-28 17:07:36
    当我们创建vue-cli项目后,我们只要了解几个文件就能解剖...在index.js控制路由,在里面引入组件,配置路由参数 // 引入将要在路由使用的组件 import Vue from 'vue' import Router from 'vue-router' import Te...
  • vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式。比如如下网址:使用hash...
  • Vue 路由配置和二级路由配置路由配置二级路由默认首个页面二级路由导致一级路由下的高亮失效 路由配置 我们初始化我们的Vue项目后,打开工程目录src/router下的index.js。我们可以把工程默认的helloworld.vue文件名...
  • 1.vue路由 可以实现单页面应用。 路由三要素: vue路由通过hash的变化切换页面(组件/div) 导航 存储页面(组件)的容器 src/router/index.js路由的配置 实现步骤: 2.router配置 对router文件夹下的index.js进行配置...
  • Vue--配置路由步骤

    千次阅读 2019-05-25 09:53:31
    本篇文章主要是用过一个小Demo来实现路由的搭建 ①在main.js文件中引入路由 ...②在main.js文件中配置路由 const router = new VueRouter({ routes: [ {path: "/",component:Home}, {path: "/h...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 76,763
精华内容 30,705
关键字:

vue路由配置

vue 订阅