精华内容
下载资源
问答
  • Vue-router就像一个路由器,将组件(components)映射到路由(routes)后,通过点击<router>它可以在<router>中将相应的组件渲染出来。 1、使用vue-router的步骤 //1、创建路由组件 const Link1={template:'#link1'};...
  • 如果对Vue路由不太熟悉 请参看我的另一篇博客:Vue学习之旅Part9:使用vue-router实现前端路由和参数传递 路由嵌套 即路由的组件内部还有子组件 适用于很多业务场景 实现路由嵌套的步骤比较简单 首先 在路由对象里...
  • 用户登录后返回权限菜单,前端根据权限菜单动态添加路由,然后再动态生成菜单栏。 思路如下: 一、定义初始化默认路由。 二、动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单...
  • 接着我继续追问…(省略)…大致明白了情况,原来这位朋友没有理解Vue-Router嵌套的原理,下面整理了一下我对Vue-Router路由嵌套的理解 Vue-Router嵌套路由 首先假设项目中有两个路由Profile和Posts,按写法把他们...
  • --可以通过query ,param两种方式 区别:query通过url传参,刷新页面还在 params刷新页面不在...-- 动态路由-params --> //在APP.vue中 <router-link :to="'/user/'+userId" replace>用户</router-link...

    --可以通过query ,param两种方式

    区别: query通过url传参,刷新页面还在    params刷新页面不在了
       
    params的类型:

    • 配置路由格式:/router/:id
    • 传递的方式:在path后面跟上对应的值
    •  传递后形成的路径:/router/123
    <!-- 动态路由-params -->
    
    //在APP.vue中
        <router-link :to="'/user/'+userId" replace>用户</router-link>    
    
    //在index.js
         {
        path: '/user/:userid',
        component: User,
        },

    跳转方法:

    // 方法1:
    <router-link :to="{ name: 'users', params: { uname: wade }}">按钮</router-link>
    // 方法2:
    this.$router.push({name:'users',params:{uname:wade}})
    // 方法3:
    this.$router.push('/user/' + wade)

    可以通过$route.params.userid 获取你说传递的值

       query的类类型

    •   配置路由格式:/router,也就是普通配置
    •   传递的方式:对象中使用query的key作为传递方式
    •   传递后形成的路径:/route?id=123
    <!--动态路由-query -->
    //01-直接在router-link 标签上以对象的形式
    <router-link :to="{path:'/profile',query:{name:'why',age:28,height:188}}">档案</router-link>
    /*
        02-或者写成按钮以点击事件形式
        <button @click='profileClick'>我的</button>    
    */
    
     //点击事件
     profileClick(){
       this.$router.push({
            path: "/profile",
            query: {
              name: "kobi",
              age: "28",
              height: 198
            }
          });
     }

    跳转方法:

    // 方法1:
    <router-link :to="{ name: 'users', query: { uname: james }}">按钮</router-link>
    // 方法2:
    this.$router.push({ name: 'users', query:{ uname:james }})
    // 方法3:
    <router-link :to="{ path: '/user', query: { uname:james }}">按钮</router-link>
    // 方法4:
    this.$router.push({ path: '/user', query:{ uname:james }})
    // 方法5:
    this.$router.push('/user?uname=' + jsmes)

    可以通过$route.query 获取你说传递的值

    展开全文
  • vue-router单页面路由

    2020-12-07 16:10:18
    准备路由 new VueRouter(); 关联路由 map 启动路由 start(App,’#box’);//第一个参数是准备的根组件,第二个参数是要捆绑的位置就是自己定义的id中 github上vue-router下载地址:...
  • vue-tidyroutes插件VueJS可以在项目中的任何位置创建路由定义。 在后台它只是一个单例对象,用于...导入'./component1'Vue.use(VueRouter)常量路由器=新的VueRouter({路由:VueTidyRoutes.export()})新的Vue({
  • 背景 今天在编写页面时,看到页面没有任何效果就只是直入直出,完全没有一点逼格,所以想要实现类似于原生app的那种切换页面时的特效,遂开始google,发现...import VueRouter from 'vue-router' import Home from '../co
  • 我们经常需要把某个模式匹配到的所有路由,全都映射到同一个组件,例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染,那么我们可以在vue-router路由路径中使用 “动态路由参数” ...

          我们经常需要把某个模式匹配到的所有路由,全都映射到同一个组件,例如,我们有一个  User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染,那么我们可以在vue-router的路由路径中使用 “动态路由参数” 来达到这个效果

            1. 动态路径参数,使用 “冒号” 开头,一个路径参数,使用冒号标记,当匹配到一个路由时,参数会被设置到  this.$router.params 中,并且可以在每个组件中使用

    this.$router.push({
     name:"路由地址",
     params:{
     name:'要发送的数据',
     }
    });
    
    
    
    //读取 路由参数接收
    this.name = this.$route.params.name;
    

            2. 现在我们知道了 可以通过动态路由传参,在路由中设置了,多段路径参数后,对应的值分别都会设置到  $router.query 和 $router.params 中

    query 和 params 之间的区别是什么?

    1. query 要用 path 来引入,params 需要用 name 来引入

    2. 接收参数时,分别是this.$route.query.name  和 this.$route.params.name (注意:是$router而不是$router)

    3. query 更加类似于我们 ajax 中 get 传参,params 则类似于 post,前者在浏览器的地址中显示,params 不显示

    4. params 传值一刷新就没了,query 传值刷新还存在


    $route 和 $router 的区别是什么?

            $route 是 “路由信息对象”,包括 path,params,hash,query,fullPath,matched,name 等路由信息参数。

             $router 为 VueRouter 的实例,相当于一个全局的路由器对象,里面包含有很多属性和子对象,例如 history 对象,经常使用的跳转链接就可以用 this.router.push 会往 history 栈中添加一个新的记录,返回上一个 history 也是使用 $router.go 方法。

    展开全文
  •  在routes.js中定义路由,在路由定义元信息(meta字段),需要缓存的页面就需要在meta对象中定义一个字段,这里设置为keepAlive,设置为true,反之,则不缓存。 { path: '/a', component: () => import('@/pages...
  • 使用vue-router实例函数addRoutes动态添加路由规则,不多废话直接上思维导图: 2、实现步骤 2.1、路由匹配判断 // src/router.js import Vue from 'vue'; import Store from '@/store'; import Router from 'vue-...
  • 我们经常需要把某种模式匹配到的所有...那么,我们可以在router路由路径中使用“动态路径参数”来达到这个效果: const User = { template: '<div>User {{ this.$route.params.id }}</div>', ...

    我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个User组件,对于所有ID各不相同的用户,都要使用这个组件来渲染。那么,我们可以在router的路由路径中使用“动态路径参数”来达到这个效果:

    const User = {
    				template: '<div>User {{ this.$route.params.id }}</div>',
    				watch: {
    					'$route'(to, from) {
    						console.log(to, from)
    					}
    				}
    			}
    			
    			const router = new VueRouter({
    				routes: [
    					{path: '/user/:id', component: User}
    				]
    			})

    现在呢,像/user/foo和/user/bar都将映射到相同的路由。

    一个“路径参数”使用冒号:标记。当匹配到一个路由时,参数会被设置到this.$route.params,可以在每个组件内使用。于是,我们可以更新User的模板,输出当前用户的ID。

    匹配优先级

    有时候,同一个路由可以匹配到多个路由,此时,匹配的优先级就按照路由的定义顺序:谁先定义,谁的优先级就高。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>TEST-VUE案例</title>
    		<script src="https://unpkg.com/vue/dist/vue.js"></script>
    		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    	</head>
    	<body>
    
    		<div id="app">
    			<ul>
    				<li>
    					<router-link to="/user/foo">
    						Go to Foo
    					</router-link>
    				</li>
    				<li>
    					<router-link to="/user/bar">
    						Go to Bar
    					</router-link>
    				</li>
    			</ul>
    			<router-view></router-view>
    		</div>
    		
    		<script>
    			
    			const User = {
    				template: '<div>User {{ this.$route.params.id }}</div>',
    				watch: {
    					'$route'(to, from) {
    						console.log(to, from)
    					}
    				}
    			}
    			
    			const router = new VueRouter({
    				routes: [
    					{path: '/user/:id', component: User}
    				]
    			})
    			
    			const app = new Vue({
    				router: router
    			}).$mount('#app')
    			
    		</script>
    		
    	</body>
    </html>
    

     

    展开全文
  • 如何实现切换页面时的过渡动画? 背景 今天在编写页面时,看到页面没有任何效果就只是直入直出,完全没有一点逼格,所以想要实现类似于原生app的那种切换页面时的特效,遂...import VueRouter from 'vue-router' import H
  • 3.创建router实例并将定义好的路由传入 4.创建和挂载根实例 再来说一下vue-cli 一、安装vue-cli脚手架工具 cnpm install vue-cli -g 二、 创建项目 vue init webpack-simple vue_webpack 使用的是webpack-...
  • 项目使用vue-router动态加载后端传过来的菜单,拼接后赋值给路由。现在由于在用户注销的时候没有resetRouter导致权限不同的用户切换,会出现路由权限错乱的问题。 网伤查了下资料,发现要调用resetRouter方法。 这...
  • vue-router动态路由详解

    万次阅读 2017-10-20 09:10:03
    通常做法是以“参数=值”的形式传递参数,而动态路由将参数融入到路由的路径定义之内成为路径的一部分。 在参数名称之前加“:”,然后将参数写在路由的path内。 下面是给详情页detail传递唯一标识id,从而调取...

    平时做项目时遇到的点击列表页,显示详情页面,此时就需要我们传递列表唯一的标识,然后显示对应的内容。

    通常做法是以“参数=值”的形式传递参数,而动态路由将参数融入到路由的路径定义之内成为路径的一部分。

    在参数名称之前加“:”,然后将参数写在路由的path内。

    下面是给详情页detail传递唯一标识id,从而调取详细的内容。

    routes: [
        {
          path: '/',
          name: 'Home',
          component: Home,
          children: [
            {
              path: '/detail/:id',
              name: 'Detail',
              component: Detail
            },
          ]
        }]

    在<router-link>中只需要在to属性中加入params属性来指定具体的参数值:

    <router-link tag="div" class="book" v-for="book in books" :to="{name:'Detail',params: {id: book.id}}" :key="book.id">
       <div class="cover">
          <img :src="book.img_url"/>
       </div>
       <div class="title">{{book.title}}</div>
       <div class="authors">{{book.authors | join}}</div>
    </router-link>
    如果要同时传递多个参数,只需要在params中对应声明参数值即可。

    那么问题来了?在组件Detail中怎么获取这个唯一标识id呢?可以通过$route.params属性来获取需要的参数值。

    具体Detail.vue

    <template>
      <div class="detail">
        <p @click="back">返回</p>
        <p>{{$route.name}}</p>
        <p>{{$route.params.id}}</p>
      </div>
    </template>
    <script type="text/ecmascript-6">
      export default {
        watch: {
          '$route' (to, from) {
            // 对路由变化作出响应...
            console.log(to);
            console.log(from);
          }
        },
        created () {
          console.log(this.$route.params.id);
        }
      }
    </script>
    <style lang="less" rel="stylesheet/less" type="text/less">
    
    </style>
    从detail/1导航到detail/2,原来的组件实例会被复用。因为两个路由都渲染同一组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用,即页面第二次加载时钩子函数将失效。那么,当复用组件时,想对路由参数做出响应的话,需要在watch对象内添加对$route对象变化的跟踪函数:

    watch: {
       '$route' (to, from) {
          // 对路由变化作出响应...
          console.log(to);
          console.log(from);
       }
    }
    例如detail/1导航到detail/2时,to与from的值:

    detail/1浏览器显示:


    detail/2浏览器显示:


    即from detail/1 to detail/2

    同时vue-router使用path to regexp作为路由路径引擎,给参数添加匹配模式。

    下面是一个只传递数字的正则,正则需要放在括号中。

    {
        path: '/detail/:id(\\d+)',
        name: 'Detail',
        component: Detail
    }
    vue-router除了使用$route.params获取参数值,还可以使用$route.query(路径渲染为detail?id=1,需要删除路由配置中路径的参数,同时更改<router-link>中的params为query)和$route.meta(常量参数,直接在路由配置中定义meta的值)获取。

    本文参考 技术胖博客  vue-router官网

    展开全文
  • 1、如果是模块化机制,需要调用 Vue.use(VueRouter) 2、定义路由组件,如: const Foo = { template: '<div>foo</div>' }; 3、定义路由(数组): const routes = [ { path: '/foo', component: ...
  • //引入VueRouter import VueRouter from 'vue-router' // 引入组件 import About from "../pages/About"; import Home from "../pages/Home"; import Message from '../pages/Message'; import News from '../pages/...
  • vue-router定义路由的四种方式

    千次阅读 2020-06-11 10:48:49
    vue-router是对浏览器BOM对象里的history的封装。 目录路由类型动态路由匹配嵌套路由编程式路由命名路由 路由类型 动态路由匹配 嵌套路由 编程式路由 命名路由和命名视图 动态路由匹配 在路由路径里添加“/:参数...
  • 1、vue 路由 如果传递 params 定义路由的时候是 /路由名称:id 获取的时候 this.$route.params.id 最后形如 /路由名称/路由参数 传参的时候 params:{ str1:str1, str2:str2 } 2、如果传递query ?id=str…...
  • 说明:vue-router的几个文章中例子是连贯的,因此对哪块有疑问请翻阅按发表时间排序的其他文章。 一、概述 给路由定义不同的名字,根据名字进行匹配 给不同的router-view定义名字,router-link通过名字进行对应...
  • vue-router动态添加路由

    2020-03-24 10:57:58
    **vue-router动态添加路由** 一、定义初始化默认路由 二、动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单tree一个个去匹配 三、通过匹配,把匹配好的路由数据addRoutes到...
  • vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起来. 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换. 安装和使用vue-router 再初始化项目的时候已经安装路由了,现在再src...
  • 如果是模块化机制,需要调用 Vue.use(VueRouter) 定义路由组件,如: const Foo = { template: '&lt;div&gt;foo&lt;/div&gt;' }; 定义路由(数组): const routes = [ { path: '/foo', ...
  • 由于路由通常会把多个组件牵扯到一起操作,所以一般对其的测试都在 端到端/集成 阶段进行,处于测试金字塔的上层。不过,做一些路由的单元测试还是大有益处的。 ...创建 App.vue 文件,并定义如下
  • Vue-router 动态路由匹配 ...const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头,/user/foo和/user/bar都将映射到相同的路由 { path: '/user/:id', component: Use...
  • Vue-cli4——vue-router路由

    千次阅读 2020-11-18 13:34:27
    router路由(一)前言一、代码解析1.1 src/router/index.js1.2 src/App.vue二、实例2.1 简单的实例2.2 在网页中不显示#号2.3 重定向2.4 router-link2.5 通过代码跳转2.6 路由懒加载三、嵌套与数据传递3.1 嵌套3.2 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,479
精华内容 10,991
关键字:

定义vue-router动态路由

vue 订阅