精华内容
下载资源
问答
  • vue3 master为功能集成模块 vue3-ts-template分支为基础模块 vue3-ts-pure为初始化项目,暂无任何功能 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 运行测试 yarn test ...
  • vue-route-webpack-plugin 介绍 扫描项目中vue文件的路由配置并生成路由文件的一个webpack插件。 特性 使用插件后,只需在项目的.vue文件中加上这样的路由配置: // 例如在 src/views/user/list.vue 文件中: /** ...
  • vue + vuex + vue-route + elment-ui + laravel的项目 内置了丰富的表单表格组件 最核心的是强大的自定义组件功能 安装 首先确保安装好了laravel,和数据库连接设置正确。 composer require smallruraldog/laravel-...
  • 在网站中普遍会遇到这样的需求,路由跳转前做一些验证,比如登录验证(未登录去登录页)。下面脚本之家小编给大家带来了使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能,感兴趣的朋友一起看看吧
  • vue-route

    千次阅读 2018-11-22 01:28:50
    Vue路由是指:根据不同地址,创造不同页面。如单页面应用,不刷新整个页面,不频繁请求,请求数据,通过js操作(ajax),如:切换两个不同图片,不同地址,只需第一次需要请求,第2次共用请求资源,只需再请求一张...

    Vue路由是指:根据不同地址,创造不同页面。如单页面应用,不刷新整个页面,不频繁请求,请求数据,通过js操作(ajax),如:切换两个不同图片,不同地址,只需第一次需要请求,第2次共用请求资源,只需再请求一张图片即可

     

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。比如我点击关于 按钮,页面中怎么就正好能显示关于的内容。这就要在js 文件中配置路由。

     

    路由中有三个基本的概念 route, routes, router。

        1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮  => home内容, 这是一条route,  about按钮 => about 内容, 这是另一条路由。

        2, routes 是一组路由,把上面的每一条路由组合起来,形成一个数组。[{home 按钮 =>home内容 }, { about按钮 => about 内容}]

        3, router 是一个机制,相当于一个管理者,它来管理路由。因为routes 只是定义了一组路由,它放在哪里是静止的,当真正来了请求,怎么办? 就是当用户点击home 按钮的时候,怎么办?这时router 就起作用了,它到routes 中去查找,去找到对应的 home 内容,所以页面中就显示了 home 内容。

        4,客户端中的路由,实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候,about 中的内容全部隐藏,反之也是一样。客户端路由有两种实现方式:基于hash 和基于html5 history api.

                 vue中使用路由时要把路径和组件对应起来,然后在页面中把组件渲染出来

     

    下面开始使用前端路由

    1、在通过vue-cli安装的vue项目里安装前端路由, npm install vue-router --save  ,安装完后node_modules里面就有vue-router包了,pakage.json文件里也有

    js文件配置

    2、在入口文件src/mian.js。;在使用之前需要引入vue,import Vue from 'vue'。vue来自于模板提供的,从node_moudules中取 第一步: import VRouter from 'vue-router',第二步,要告诉 vue 使用 vueRoute。Vue.use(VRouter)
     

    3、 创建映射关系,什么地址到什么页面,定义route,  一条路由的实现。它是一个对象,由两个部分组成: path和component.  path 指路径,component 指的是组件。如:{path:’/home’, component:home}。定义一组路由routes,由组成一个路由组: 

    const routes = [

      {path: '/home', component: Home },

      {path: '/about', component: About }

    ]

    4、创建router 对路由进行管理,它是由构造函数 new vueRouter() 创建,接受routes 参数。

     

    let router = new VueRouter({
      routes // routes: routes 的简写
    })

    5、配置完成后,把router 实例注入到 vue 根实例中,就可以使用路由了

     

    const app = new Vue({

      el:'#app',

     router

    })

    最后:页面设置(html模版中)

     

      在vue-router中, 它定义了两个标签<router-link> 和<router-view>来对应点击和显示部分。<router-link> 就是定义页面中点击的部分,<router-view> 定义显示部分,就是点击后,区配的内容显示在什么地方。所以 <router-link> 还有一个非常重要的属性 to,定义点击之后,要到哪里去, 如:<router-link  to="/home">Home</router-link>

    执行过程:当用户点击 router-link 标签时,会去寻找它的 to 属性, 它的 to 属性和 js 中配置的路径{ path: '/home', component: Home}  path 一一对应,从而找到了匹配的组件, 最后把组件渲染到 <router-view> 标签所在的地方。所有的这些实现才是基于hash 实现的(即访问地址localhost:8080/#/apple localhost:8080/#/banana中有#号键)

    当首次进入页面的时候,页面中并没有显示任何内容。这是因为首次进入页面时,它的路径是 '/',我们并没有给这个路径做相应的配置。一般,页面一加载进来都会显示home页面,我们也要把这个路径指向home组件。但是如果我们写{ path: '/', component: Home },vue 会报错,因为两条路径却指向同一个方向。这怎么办?这需要重定向,所谓重定向,就是重新给它指定一个方向,它本来是访问 / 路径,我们重新指向‘/home’, 它就相当于访问 '/home', 相应地, home组件就会显示到页面上。vueRouter中用 redirect 来定义重定向

     

    // 重定向
        {
            path: '/', 
            redirect: '/home' 
        }

     

     

    router参数——动态路由

           通常不同的用户(就是用户的id不同),它都会导航到同一个user  组件中。这样我们在配置路由的时候,就不能写死, 就是路由中的path属性,不能写死,那要怎么设置? 导航到 user 组件,路径中肯定有user, id 不同,那就给路径一个动态部分来匹配不同的id.  在vue-router中,动态部分 以 : 开头,那么路径就变成了 /user/:id, 这条路由就可以这么写:  { path:"/user/:id", component: user },类比这里的苹果组件,颜色为参数,路由这么写 { path: '/apple/:color', component: apple},

     

    一、设置参数

    const router = new VueRouter({

         mode:'history',

         routes:[

               //color作为参数传给当前home页面

              { path: '/apple/:color', component: apple},

               { path: '/banana', component: banana}

         ]

    })

    页面中改变,

    <router-link to="/apple/red">apple</router-link>

    <router-link to="/apple/green">apple</router-link>

     

    二、在组件内部获取参数

    设置了参数后,路由会往每个组件全局的router对象里插入当前页面的params,

    添加了参数后,会匹配完整的带参数的路由,注入过来的参数,可以直接作为$route.params对象的属性,可通过$route.params.color访问

    参数是一种很灵活的配置,带冒号的位置都是参数,不带引号的路径必须执行严格匹配

    组件来回切换时,由于它们都是指向同一组件,vue不会销毁再创建这个组件,而是复用这个组件。组件的生命周期不管用了。这时如果想要在组件来回切换的时候做点事情,那么只能在组件内部(apple.vue中)利用watch 来监听$route 的变化。

     

    <script>
        export default {
            data () {
                return {
                    dySegment: ''
                }
            },
            watch: {
                $route (to,from){
                    // to表示的是你要去的那个组件,from 表示的是你从哪个组件过来的,它们是两个对象,你可以把它打印出来,它们也有一个param 属性
                    console.log(to);
                    console.log(from);
                    this.dySegment = to.params.id
                }
            }
        }
    </script>
     

     

     

    嵌套路由

     

    嵌套路由,主要是由我们的页面结构所决定的。当我们进入到苹果页面的时候,它下面还有分类,苹果颜色。当我们点击各个分类的时候,它还是需要路由到各个部分,如点击手机,它肯定到对应到红苹果

    的部分。

      在路由的设计上,首先进入到 apple,然后才能进入到RedApple等, 就相当于进入到了Apple

    的子元素。所以vue  提供了childrens 属性,它也是一组路由,相当于我们所写的routes。

    当我们进入apple页面时,它在children中对应的路由path 是空 '',要想点击apple时,要想渲染相对应的子组件,那还需要配置一条路由

    在children数组下增加一条路由,如下

     

    // 当进入到apple时,下面的组件显示
        {
            path: "",
            component: RedApple
        }

     

     

    Router-link 简单跳转,直接用to加路径即可,to='/apple',前面若没有/,只有apple,则表示在当前路径跳转,有/则表示根目录。v-bind动态绑定的可以为对象,也可以为data里面绑定的,这个对象是{path:'/banana'}可以直接将参数自定义的传进来{path:'/banana',params:{color:’yellow’},}banana组件里就可以获取到这个color

       <router-link to='/apple/red'>to redapple</router-link>

       <router-link :to="{path:'/banana'}">tobanana</router-link>

       <router-link :to="{path:'/user'}">to user</router-link>

    <router-link to='/apple'>to apple</router-link>

       

     

    具名路由

    根据名字就可以知道,这个路由有一个名字,那就直接给这个路由加一个name 属性,就可以了。 给user 路由加一个name 属性

     

    命名路由的使用, 在router-link 中to 属性就可以使用对象了, 

     <router-link to="/apple/red">redApple</router-link> // 和下面等价 
     <router-link :to="{ name: 'applePalge', params: { color: red }}">User</router-link>   // 当使用对象作为路由的时候,to前面要加一个冒号,表示绑定

     

     

    命名视图:

    Router-view标签加name属性,在main.js,路由配置中,component里给不同的视图指定不同的组件

     

      Router-link默认渲染为a链接,若想在ul里面添加链接(导航),那么可以在<router-link标签里添加 tag=’li’

       在模板temple里面添加router-link是声明式导航,也可以在js里面添加编程式导航

      如每次路由切换时,可以为其设定一些操作(检查用户登录状态)

       Router.berforeEach(router.push({path:'/apple'}))

     

      过渡配合router-view使用

     

     

    动态组件(keep-alive)配合router-view使用,切换过的视图进行缓存

     

    当前导航会添加样式router-link-active,可在配置中更改这个样式的状态

    展开全文
  • vue路由插件之vue-route

    2020-10-16 20:04:56
    主要介绍了vue路由插件之vue-route的相关知识,本文通过实例代码给大家介绍了vue router的使用,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 使用缓存为Vue中的keep-alive类的react-router 。 如果只想要<KeepAlive> ,请尝试 React v15 + React-Router v4 + 问题 使用Route ,前进或后退时无法缓存组件,这会导致数据丢失和交互 原因与解决方案 Route不...
  • 使用方法 进入项目目录,运行 npm install 然后执行 npm run dev 开始开发项目
  • vuevue-route

    千次阅读 2018-05-02 13:52:11
    Vue路由是指:根据不同地址,创造不同页面。如单页面应用,不刷新整个页面,不频繁请求,请求数据,通过js操作(ajax),如:切换两个不同图片,不同地址,只需第一次需要请求,第2次共用请求资源,只需再请求一张...

    Vue路由是指:根据不同地址,创造不同页面。如单页面应用,不刷新整个页面,不频繁请求,请求数据,通过js操作(ajax),如:切换两个不同图片,不同地址,只需第一次需要请求,第2次共用请求资源,只需再请求一张图片即可

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。比如我点击关于 按钮,页面中怎么就正好能显示关于的内容。这就要在js 文件中配置路由。

    路由中有三个基本的概念 route, routes, router。

        1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮  => home内容, 这是一条route,  about按钮 => about 内容, 这是另一条路由。

        2, routes 是一组路由,把上面的每一条路由组合起来,形成一个数组。[{home 按钮 =>home内容 }, { about按钮 => about 内容}]

        3, router 是一个机制,相当于一个管理者,它来管理路由。因为routes 只是定义了一组路由,它放在哪里是静止的,当真正来了请求,怎么办? 就是当用户点击home 按钮的时候,怎么办?这时router 就起作用了,它到routes 中去查找,去找到对应的 home 内容,所以页面中就显示了 home 内容。

        4,客户端中的路由,实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候,about 中的内容全部隐藏,反之也是一样。客户端路由有两种实现方式:基于hash 和基于html5 history api.

                 vue中使用路由时要把路径和组件对应起来,然后在页面中把组件渲染出来

    下面开始使用前端路由

    1、在通过vue-cli安装的vue项目里安装前端路由, npm install vue-router --save  ,安装完后node_modules里面就有vue-router包了,pakage.json文件里也有

    js文件配置

    2、在入口文件src/mian.js。;在使用之前需要引入vue,import Vue from 'vue'。vue来自于模板提供的,从node_moudules中取 第一步: import VRouter from 'vue-router',第二步,要告诉 vue 使用 vueRoute。Vue.use(VRouter)

    3、 创建映射关系,什么地址到什么页面,义route,  一条路由的实现。它是一个对象,由两个部分组成: path和component.  path 指路径,component 指的是组件。如:{path:’/home’, component:home}。定义一组路由routes,由组成一个路由组: 

    const routes = [

      {path: '/home', component: Home },

      {path: '/about', component: About }

    ]

    4、创建router 对路由进行管理,它是由构造函数 new vueRouter() 创建,接受routes 参数。

    let router = new VueRouter({
      routes // routes: routes 的简写
    })

    5、配置完成后,把router 实例注入到 vue 根实例中,就可以使用路由了

    const app = new Vue({

      el:'#app',

     router

    })

    最后:页面设置(html模版中

      在vue-router中, 它定义了两个标签<router-link> 和<router-view>来对应点击和显示部分。<router-link> 就是定义页面中点击的部分,<router-view> 定义显示部分,就是点击后,区配的内容显示在什么地方。所以 <router-link> 还有一个非常重要的属性 to,定义点击之后,要到哪里去, 如:<router-link  to="/home">Home</router-link>

    执行过程:当用户点击 router-link 标签时,会去寻找它的 to 属性, 它的 to 属性和 js 中配置的路径{ path: '/home', component: Home}  path 一一对应,从而找到了匹配的组件, 最后把组件渲染到 <router-view> 标签所在的地方。所有的这些实现才是基于hash 实现的(即访问地址localhost:8080/#/apple localhost:8080/#/banana中有#号键)

    当首次进入页面的时候,页面中并没有显示任何内容。这是因为首次进入页面时,它的路径是 '/',我们并没有给这个路径做相应的配置。一般,页面一加载进来都会显示home页面,我们也要把这个路径指向home组件。但是如果我们写{ path: '/', component: Home },vue 会报错,因为两条路径却指向同一个方向。这怎么办?这需要重定向,所谓重定向,就是重新给它指定一个方向,它本来是访问 / 路径,我们重新指向‘/home’, 它就相当于访问 '/home', 相应地, home组件就会显示到页面上。vueRouter中用 redirect 来定义重定向

    // 重定向
        {
            path: '/', 
            redirect: '/home' 
        }


    router参数——动态路由

           通常不同的用户(就是用户的id不同),它都会导航到同一个user  组件中。这样我们在配置路由的时候,就不能写死, 就是路由中的path属性,不能写死,那要怎么设置? 导航到 user 组件,路径中肯定有user, id 不同,那就给路径一个动态部分来匹配不同的id.  在vue-router中,动态部分 以 : 开头,那么路径就变成了 /user/:id, 这条路由就可以这么写:  { path:"/user/:id", component: user },类比这里的苹果组件,颜色为参数,路由这么写 { path: '/apple/:color', component: apple},

    一、设置参数

    const router = new VueRouter({

         mode:'history',

         routes:[

               //color作为参数传给当前home页面

              { path: '/apple/:color', component: apple},

               { path: '/banana', component: banana}

         ]

    })

    页面中改变,

    <router-link to="/apple/red">apple</router-link>

    <router-link to="/apple/green">apple</router-link>

    二、在组件内部获取参数

    设置了参数后,路由会往每个组件全局的router对象里插入当前页面的params,


    添加了参数后,会匹配完整的带参数的路由,注入过来的参数,可以直接作为$route.params对象的属性,可通过$route.params.color访问

    参数是一种很灵活的配置,带冒号的位置都是参数,不带引号的路径必须执行严格匹配


    组件来回切换时,由于它们都是指向同一组件,vue不会销毁再创建这个组件,而是复用这个组件。组件的生命周期不管用了。这时如果想要在组件来回切换的时候做点事情,那么只能在组件内部(apple.vue中)利用watch 来监听$route 的变化。

    <script>
        export default {
            data () {
                return {
                    dySegment: ''
                }
            },
            watch: {
                $route (to,from){
                    // to表示的是你要去的那个组件,from 表示的是你从哪个组件过来的,它们是两个对象,你可以把它打印出来,它们也有一个param 属性
                    console.log(to);
                    console.log(from);
                    this.dySegment = to.params.id
                }
            }
        }
    </script>
    
    

    嵌套路由

    嵌套路由,主要是由我们的页面结构所决定的。当我们进入到苹果页面的时候,它下面还有分类,苹果颜色。当我们点击各个分类的时候,它还是需要路由到各个部分,如点击手机,它肯定到对应到红苹果

    的部分。

      在路由的设计上,首先进入到 apple,然后才能进入到RedApple等, 就相当于进入到了Apple

    的子元素。所以vue  提供了childrens 属性,它也是一组路由,相当于我们所写的routes。

    当我们进入apple页面时,它在children中对应的路由path 是空 '',要想点击apple时,要想渲染相对应的子组件,那还需要配置一条路由

    在children数组下增加一条路由,如下

    // 当进入到apple时,下面的组件显示
        {
            path: "",
            component: RedApple
        }


    Router-link 简单跳转,直接用to加路径即可,to='/apple',前面若没有/,只有apple,则表示在当前路径跳转,有/则表示根目录。v-bind动态绑定的可以为对象,也可以为data里面绑定的,这个对象是{path:'/banana'}可以直接将参数自定义的传进来{path:'/banana'params:{color:’yellow’},}banana组件里就可以获取到这个color

       <router-link to='/apple/red'>to redapple</router-link>

       <router-link :to="{path:'/banana'}">tobanana</router-link>

       <router-link :to="{path:'/user'}">to user</router-link>

    <router-link to='/apple'>to apple</router-link>

       


    具名路由

    根据名字就可以知道,这个路由有一个名字,那就直接给这个路由加一个name 属性,就可以了。 给user 路由加一个name 属性


    命名路由的使用, 在router-link 中to 属性就可以使用对象了, 

     <router-link to="/apple/red">redApple</router-link> // 和下面等价 
     <router-link :to="{ name: 'applePalge', params: { color: red }}">User</router-link>   // 当使用对象作为路由的时候,to前面要加一个冒号,表示绑定



    命名视图:

    Router-view标签加name属性,在main.js,路由配置中,component里给不同的视图指定不同的组件


      Router-link默认渲染为a链接,若想在ul里面添加链接(导航),那么可以在<router-link标签里添加 tag=’li’

       在模板temple里面添加router-link是声明式导航,也可以在js里面添加编程式导航

      如每次路由切换时,可以为其设定一些操作(检查用户登录状态)

       Router.berforeEach(router.push({path:'/apple'}))


      过渡配合router-view使用

     

     

    动态组件(keep-alive)配合router-view使用,切换过的视图进行缓存

     

    当前导航会添加样式router-link-active,可在配置中更改这个样式的状态


    展开全文
  • vue2.0 + webpack + vue-cli + vue-router + vuex 二,后台my-account-server Node.js + Express + MySQL 三,设计需求 登录:个人账户信息 记录个人每日进出账务信息,主要细分包括:日期类型金额成员备注 可根据...
  • 框架及插件:vue-cli2、electron-vue(主框架)、vue-route、vuex、axios element-UI(主UI框架)、vuedraggable(用于拖拽) echarts(折线图)、qrcodejs2(二维码生成)、jsbarcode(条形码生成) ali-oss(阿里云oss)
  • vue-route-transition vue router 切换动画 特性 模拟前进后退动画 基于css3流畅动画 基于sessionStorage,页面刷新不影响路由记录 路由懒加载,返回可记录滚动条位置 前进后退的判断与路由路径规则无关 支持任意...

    vue-route-transition

    vue router 切换动画

    特性

    • 模拟前进后退动画
    • 基于css3流畅动画
    • 基于sessionStorage,页面刷新不影响路由记录
    • 路由懒加载,返回可记录滚动条位置
    • 前进后退的判断与路由路径规则无关
    • 支持任意基于Vue的UI框架

    demo

    demo.gif?raw=true

    手机扫码

    qrcode.png?raw=true

    在线预览

    说明

    配套包含两个组件

    • vue-route-transition 负责动画
    • router-layout 负责页面排版。 主要是解决transform动画,position:fixed异常问题

    像往常一样使用

    npm i vue-route-transition --save

    main.js

    import RouteTransition from 'vue-route-transition'
    Vue.use(RouteTransition)

    App.vue

    <template>
      <vue-route-transition id="app">
      </vue-route-transition>
    </template>

    页面,如果有吸附头部,或吸附底部元素的情况下才需要使用router-layout组件

    <template>
      <router-layout>
        <header slot="header">
          头部导航
        </header>
        <div></div>
        <div></div>
        ...
        <footer slot="footer">
          <button>底部按钮</button>
        </footer>
      </router-layout>
    </template>

    如果存在子路由,需手动设置router-layout的id属性,滚动条定位作用。

    <router-layout id="__index">
      <router-view></router-view>
      <van-tabbar slot="footer" :fixed="false" v-model="active">
        <van-tabbar-item to="/" icon="shop">标签</van-tabbar-item>
        <van-tabbar-item to="/tab" icon="chat">标签</van-tabbar-item>
        <van-tabbar-item to="/swipe" icon="records">标签</van-tabbar-item>
      </van-tabbar>
    </router-layout>

    github

    开源协议

    本项目基于 MIT 协议,请自由地享受和参与开源。

    转载于:https://www.cnblogs.com/dreamback/p/vue-route-transition.html

    展开全文
  • vue-route中父路由没有component怎么办

    千次阅读 2020-03-14 16:19:13
    可以在父路由中的component中写component:()=>import('@views/fillout'),就可以正常显示出子路由的内容,不然会发现页面中该是子路由显示内容的地方是空白的。 ...

        可以在父路由中的component中写

    component: {

              render: c => c("router-view")

            }

    ,就可以正常显示出子路由的内容,不然会发现页面中该是子路由显示内容的地方是空白的。

    展开全文
  • Vue-Study-3rd 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
  • vue-route路由组件中进行分页
  • 在路由守卫router.beforeEach中用router.addRoute(accessRoutes)挂载路由,动态生成的路由全部都访问不到,动态路由可以正常获取到。 <p style="text-align:center"><img alt="" src="https://img-ask....
  • vue-route路由组件中进行分页
  • vue-route, 基于 Vue.js, 视图的路由指令 路由的vue路由已经停止。 请尝试使用官方的 vue路由器。基于 Vue.js, 视图的路由指令。 基于 v-component,可以从 v-transition 。keep-alive 。wait-for 。transition-mo
  • Vue - route 路由中配置 404 页面

    千次阅读 2021-07-13 14:09:00
    前言 当路由中没有匹配时,会出现页面空白,此时应该写一个 404 页面来代替空白页面。 实现方法 路由是从上往下执行,如果路由表中没有匹配的路由,则会执行 path 为 * 的路由页面。...然后写一个 404.vue 即可
  • vue3+vue-router4.0 动态路由 add-RouteVue3就必须用Router4.x版本,由于4.0去掉了addRoutes 所以只能用addRoute 现在是只能添加一个 function routerPackag(routers:any) { if (routers) { routers.filter(...
  • 关于vue-route跳转是比较丰富,并且也是比较好用的,也有很多方式: 1.比较直观的,声明式传参 const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ]...
  • 主要介绍了移动端滑动切换组件封装 vue-swiper-router实例详解,需要的朋友可以参考下
  • vue-route部署后刷新出现404的解决

    千次阅读 2017-09-27 17:00:23
    使用vue-route完成vue单页应用项目是很便捷的,但在编写调试时一切使用正常,一旦打包发到web服务器点击跳转没有问题,但是刷新浏览器就出现404。出现这个问题是应为vue-route是在js层完成的定向跳转,所以直接是不...
  • Vue Smart Route允许您基于您的路线创建查询系统。 您可以简单地创建一个命令输入来创建智能操作,包括静态路由和异步路由: 安装 yarn add vue-smart-route 然后安装它: import Vue from 'vue' import VueRouter...
  • 使用vue-route时安装vue-loader遇到的坑

    千次阅读 2018-05-08 14:12:26
    当时是在尝试用vue-router做路由,用了vue-cli搭建项目。由于对Eslint不熟悉,就按照网上的一个教程取消了Eslint代码规范。然后一npm run dev就出现下面的错误提示: 但是我明明安装了vue-loader啊!!! 问题出...
  • 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+vue-route实现面包屑

    千次阅读 2020-03-25 14:50:15
    <div> <div v-for="(item,index) in levelList" :key="item.path" style="display:... }, isindex(route) { const name = route && route.name; if (!name) { return false; } return name.trim() === "index"; },
  • 主要介绍了vue-router的使用方法及含参数的配置方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 问题描述:最近在开发cms的时候使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,自己在服务器端配置nginx。部署完成后,访问没问题,从页面中点击跳转也没问题,但是只要点击刷新或通过浏览器地址...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 49,022
精华内容 19,608
关键字:

vue-route

vue 订阅