精华内容
下载资源
问答
  • 路由参数
    千次阅读
    2022-04-27 10:00:17
    // 获取路由参数
                    getUrlOption(){
    	            	let str = location.search.substr(1).split("&");
    	            	let obj = {};
    	            	str.forEach(e => {
    	            	    let list = e.split("=");
    	            	    obj[list[0]] = list[1];
    	            	});
    	            	return obj
    	            },
    	            getUrlOption().id
    
    更多相关内容
  • 主要介绍了详解解决Vue相同路由参数不同不会刷新的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • laravel路由参数_了解Laravel路由参数

    千次阅读 2020-07-19 03:13:02
    laravel路由参数 Today we'll be looking at more of Laravel's routing features. This time we'll be dealing with how Laravel handles route parameters. We've gone over Laravel routing before, but this ...

    laravel路由参数

    Today we'll be looking at more of Laravel's routing features. This time we'll be dealing with how Laravel handles route parameters. We've gone over Laravel routing before, but this time we'll be looking at more advanced scenarios.

    今天,我们将研究Laravel的更多路由功能。 这次我们将讨论Laravel如何处理路线参数 。 之前我们已经讨论过Laravel路由 ,但是这次我们将研究更高级的场景。

    路线参数 (Route Parameters)

    Laravel let's us use route parameters in our routes. This helps when you want to create routes with things like a subcategory or a specific identifier (name, id, or any other parameter). Let's look at the different ways to use route parameters.

    Laravel让我们在路线中使用路线参数。 当您想要创建带有子类别或特定标识符 (名称,ID或任何其他参数)之类的路由时,这会有所帮助。 让我们看看使用路由参数的不同方法。

    获取基本路线参数 (Getting a Basic Route Parameter)

    In this example, we will have a route for users and we'll pull the identifying parameter. We'll do it two different ways with name and with an id

    在此示例中,我们将为用户提供一条路线,并拉出识别参数。 我们将使用nameid两种不同的方式

    // get the cuteness level of a puppy
        Route::get('puppies/{cutelevel}', function($cutelevel) 
        {
            return 'This puppy is an absolute ' . $cutelevel . ' out of ' . $cutelevel;
        });
    
        // OR
    
        // get the parameter of name
        Route::get('users/{name}', function($name) 
        {
            return 'User Name is ' . $name;
        });

    Testing Cuteness Level: Now in our browser, if we access http://example.com/puppies/5, our browser would show This puppy is an absolute 5 out of 5.

    测试可爱度 :现在,在浏览器中,如果我们访问http://example.com/puppies/5 ,则浏览器将显示“ 这只小狗绝对是5之5”

    Testing Name: Now in our browser, if we access http://example.com/users/chris, our browser would show User Name is Chris.

    测试名称 :现在,在我们的浏览器中,如果我们访问http://example.com/users/chris ,则我们的浏览器将显示User Name是Chris

    使用可选的路由参数 (Using Optional Route Parameters)

    For this example, let's say we have a gallery of photos. We also have categories of photos. The category will be optional, otherwise, we'll just show all the photos.

    对于此示例,假设我们有一个图库。 我们也有照片类别。 类别是可选的,否则,我们将仅显示所有照片。

    // optional category
        Route::get('gallery/{category?}', function($category) 
        {
            // if category is set, show the category
            // if not, then show all
            if ($category)
                return 'This is the ' . $category . ' section.';
            else 
                return 'These are all the photos.';
    
        });

    Testing Optional Category: If we visit http://example.com/gallery/puppies, our browser would return This is the puppies section.

    测试可选类别 :如果我们访问http://example.com/gallery/puppies ,则浏览器将返回“ 这是小狗”部分。

    Testing No Optional Category: If we visit http://example.com/gallery, our browser will return These are all the photos.

    测试否可选类别 :如果我们访问http://example.com/gallery ,则我们的浏览器将返回这些都是照片。

    路由参数默认值 (Route Parameter Defaults)

    Let's say you always want a user to have a category selected. So if they don't have a category selected, they will automatically default to lets say the sunsets category.

    假设您一直希望用户选择一个类别。 因此,如果未选择类别,则它们将自动默认为日落类别。

    // optional category with a default
        Route::get('gallery/{category?}', function($category = 'sunsets')
        {
            return 'This is the ' . $category . ' category.';
        });

    Testing No Category: If we visit http://example.com/gallery, then our browser will return This is the sunsets category.

    测试无类别 :如果我们访问http://example.com/gallery ,则我们的浏览器将返回这是日落类别。

    Testing A Category: If we visit http://example.com/gallery/puppies, then our browser will return This is the puppies category.

    测试类别 :如果我们访问http://example.com/gallery/puppies ,则我们的浏览器将返回“ 这是小狗类别”。

    提取真实数据 (Pulling Real Data)

    So we've gone through the basics of route parameters. Let's talk about using these for a real world scenario. We will use the galleries example.

    因此,我们已经研究了路由参数的基础。 让我们谈谈在现实世界中使用它们的情况。 我们将使用画廊示例

    In the real world, you wouldn't want to give your visitor a sentence just telling them that they are seeing the puppies category. Your user will want to see puppies!.

    在现实世界中,您不希望给访客一个句子,而只是告诉他们他们看到的是小狗类别。 您的用户将要看到小狗!

    Let's say you already set up your Laravel application, migrations, and database. We can use Eloquent to pull data based on our route parameters.

    假设您已经设置了Laravel应用程序,迁移和数据库。 我们可以使用Eloquent根据路线参数提取数据。

    Once you also have your Eloquent model, you can call the information you need from the route (of course when your application gets larger, you'll want to move this logic into a controller).

    一旦有了Eloquent模型,就可以从路由中调用所需的信息(当然,当您的应用程序变大时,您需要将此逻辑移至控制器中)。

    // get the category of gallery for viewing
        Route::get('gallery/{category?}', function($category) {
    
            // get the gallery stuff for the category
            $gallery = Gallery::where('category', '=', $category);
    
            // return a view and send the gallery data to the view
            return View::make('gallery')
                ->with('gallery', $gallery);
        });

    结论 (Conclusion)

    As you can see, it is very easy to use route parameters and the Eloquent ORM to pull real data and send it to your view.

    如您所见,使用路由参数和Eloquent ORM提取真实数据并将其发送到视图非常容易。

    Let us know if there are any specific application use cases you'd like to see and we'll try to help out. You can expand on this with filters for authentication, route groups to prefix all routes, and much more.

    让我们知道您是否想查看任何特定的应用程序用例,我们将尽力提供帮助。 您可以使用用于身份验证的过滤器,为所有路由添加前缀的路由组等扩展功能。

    I'd advise you to check out the official Laravel route parameter docs to do more things like route constraints using regular expressions and more.

    我建议您查看官方的Laravel 路线参数文档,以使用正则表达式执行更多操作,例如路线约束等。

    翻译自: https://scotch.io/tutorials/understanding-laravel-route-parameters

    laravel路由参数

    展开全文
  • Vue路由获取路由参数

    千次阅读 2020-12-18 17:48:38
    vue路由设置路由参数有2种方式:1.通过query配置:登录通过query配置的路径显示如下:2.通过params配置:注册通过query配置的路径显示如下:通过该方法配置的参数,需要在配置路由的时候给参数留个坑,如下图:获取...

    vue路由设置路由参数有2种方式:

    1.通过query配置:

    登录

    通过query配置的路径显示如下:

    2.通过params配置:

    注册

    通过query配置的路径显示如下:

    通过该方法配置的参数,需要在配置路由的时候给参数留个坑,如下图:

    获取路由参数的方法:

    1.通过query配置的:

    this.$route.query

    2.通过params配置的:

    this.$route.params

    相关代码:

    路由参数

    var Login = {

    template:`

    我是登录页面
    `,

    created() {

    console.log(this.$route.query)

    },

    }

    var Register = {

    template:`

    我是注册页面
    `,

    created() {

    console.log(this.$route.params)

    },

    }

    Vue.use(VueRouter);

    var router = new VueRouter({

    routes:[

    {name:'login',path:'/login',component:Login},

    //通过params传递的路由参数需要用 :参数名 来占个坑

    {name:'register',path:'/register/:name',component:Register}

    ]

    });

    var App = {

    template:`

    登录

    注册

    `

    }

    var vm = new Vue({

    el: '#app',

    router:router,

    components: {

    app:App

    },

    template:``

    });

    补充说明:

    $route:路由信息对象,只读对象;

    $router:路由操作对象 ,只写对象。

    一、  to里的值可以是一个字符串路径,或者一个描述地址的对象。例如:

    // 字符串

    to apple

    // 对象

    to apple

    // 命名路由

    to apple

    //直接路由带查询参数query,地址栏变成 /apple?color=red

    to apple

    // 命名路由带查询参数query,地址栏变成/apple?color=red

    to apple

    //直接路由带路由参数params,params 不生效,如果提供了 path,params 会被忽略

    to apple

    // 命名路由带路由参数params,地址栏是/apple/red

    to apple

    二、router.push(...)方法  同样的规则也适用于router.push(...)方法。

    // 字符串

    router.push('apple')

    // 对象

    router.push({path:'apple'})

    // 命名路由

    router.push({name: 'applename'})

    //直接路由带查询参数query,地址栏变成 /apple?color=red

    router.push({path: 'apple', query: {color: 'red' }})

    // 命名路由带查询参数query,地址栏变成/apple?color=red

    router.push({name: 'applename', query: {color: 'red' }})

    //直接路由带路由参数params,params 不生效,如果提供了 path,params 会被忽略

    router.push({path:'applename', params:{ color: 'red' }})

    // 命名路由带路由参数params,地址栏是/apple/red

    router.push({name:'applename', params:{ color: 'red' }})

    三、注意点

    1、关于带参数的路由总结如下:

    无论是直接路由“path" 还是命名路由“name”,带查询参数query,地址栏会变成“/url?查询参数名:查询参数值“;

    直接路由“path" 带路由参数params params 不生效;

    命名路由“name" 带路由参数params 地址栏保持是“/url/路由参数值”;

    2、设置路由map里的path值:

    带路由参数params时,路由map里的path应该写成:  path:'/apple/:color' ;

    带查询参数query时,路由map里的path应该写成: path:'/apple' ;

    3、获取参数方法:

    在组件中:  {{$route.params.color}}

    在js里: this.$route.params.color

    展开全文
  • Vue配置路由参数

    千次阅读 2022-06-12 15:43:59
    vue的路由参数

    一 嵌套路由的使用

    1.1 配置理由的规则

                    {
                        path:'message',
                        component:message,
                        children:[{
                   
                            path:'detail',
                            component:detail}]
                            
                    }

    1.2 访问时候的配置

     <router-link  active-class="active" to="/home/message/detail">子组件</router-link>
    

    二 路由的query参数

    2.1 配置路由规则(同上即可)

    2.2.1跳转路由并携带query参数 to的字符串写法

    <ul>
            <li v-for="m in meaasgeList" :key="m.id">
             <!-- <router-link  active-class="active" 
    :to="`/home/message/detail?id=${m.id}&title=${m.title}`"> {{m.title}}</router-link> -->
    
    </li>
    </ul>

    2.2.2 <!-- 跳转路由并携带query参数  to的对象写法 -->

    <router-link  active-class="active" :to="{
                    path:'/home/message/detail',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                }"> {{m.title}}</router-link>

    2.3 路由组件使用传递过来的参数

    <ul>
         <li>{{$route.query.id}}</li>
           <li>{{$route.query.title}}</li></ul>

    三 命名路由

    3.1 配置路由

       {
                        path:'message',
                        component:message,
                        children:[{
                            name:'xiangqing',
                            path:'detail',
                            component:detail]
                    }

    3.2 路由使用

       <!-- 跳转路由并携带query参数  to的对象写法 -->
                <!-- <router-link  active-class="active" :to="{
                    name:'xiangqing',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                }"> {{m.title}}</router-link> -->

    四 路由的params参数

    4.1 配置路由

                    {
                        path:'message',
                        component:message,
                        children:[{
                            name:'xiangqing',
                            path:'detail/:id/:title',
                            component:detail}]
                    }

    4.2 使用路由

     <!-- 跳转路由并携带params参数  to的字符串写法 -->
    
                <!-- <router-link  active-class="active" :to="`/home/message/detail/${m.id}/${m.title}`"> {{m.title}}</router-link> -->
     
     
               <!-- 跳转路由并携带params参数  to的对象写法 -->
                 <!-- 这必须是name  path会报错 -->
                <router-link  active-class="active" :to="{
                    name:'xiangqing',  
                    params:{
                        id:m.id,
                        title:m.title
                    }
                }"> {{m.title}}</router-link>

    4.3 路由组件使用传递过来的参数

           <!-- <li>{{$route.params.id}}</li>
           <li>{{$route.params.title}}</li> -->

    五 路由的props配置

    5.1 配置路由    这的path一定要唯一,可以是detail/:id 也可以是 detail/:id/:title,但是不能是detail

    不唯一的话就只能跳转一次

    {
                        path:'message',
                        component:message,
                        children:[{
                            name:'xiangqing',
                            path:'detail/:id',
                            component:detail,
                            //方便路由组件更好的接受参数
                            //props的第一种写法,值为对象 ,所有的key-value都会以props的形式传给detail组件
                            // props:{a:1,b:'hello'}
    
                            //props的第二种写法 值为布尔值 若为真,就会把该路由组件收到的params参数,以props的形式传给detail组件
                            props:true
    
                            //prop的第三种写法 值为函数
                            // props($route){
                            //     return {id:$route.params.id,title:$route.params.title}
                            // }
    
                        }]
                    }

    5.2 路由的使用   只要能携带params属性就可以

     <!-- 跳转路由并携带params参数  to的字符串写法 -->
    
                <!-- <router-link  active-class="active" :to="`/home/message/detail/${m.id}/${m.title}`"> {{m.title}}</router-link> -->
     
     
               <!-- 跳转路由并携带params参数  to的对象写法 -->
                 <!-- 这必须是name  path会报错 -->
                <router-link  active-class="active" :to="{
                    name:'xiangqing',  
                    params:{
                        id:m.id,
                        title:m.title
                    }
                }"> {{m.title}}</router-link>
               </li>

    5.3 路由组件的使用

    <template>
      <ul>
          <!-- <li>{{$route.query.id}}</li>
           <li>{{$route.query.title}}</li> -->
           <!-- <li>{{$route.params.id}}</li>
           <li>{{$route.params.title}}</li> -->
           <li>{{id}}</li>
           <li>{{title}}</li>
    
      </ul>
    </template>
    
    <script>
    export default {
     name:'detail',
     props:['id','title'],
     mounted(){
         console.log(this.$route)
     }
    }
    </script>

    展开全文
  • 【vue】Vue路由获取路由参数

    万次阅读 2021-07-03 12:46:00
    vue路由设置路由参数有2种方式: 1.通过query配置: <router-link :to="{ name:'login',query:{id:1} }">登录</router-link> //通过query配置的路径显示如下:.html#/login?id=1 2.通过params配置:...
  • 我们想要实现从不同的菜单点击进入订单详情页,再返回订单列表的时候,还是定位在之前对应的菜单,这时候就需要用到替换路由参数。 我们可以在执行点击菜单的时候,就替换掉路由地址的参数,以便于之后返回该订单...
  • vue动态路由参数

    千次阅读 2022-02-07 23:43:30
    1. vue路径中可以放置一些参数 routes: [ { path: '/course/detail/:id/', // 通过this.$route.params.id 进行获取 name: 'CourseDetail', component: CourseDetail }, ] 2. 取值(取出路由中放置的id) ...
  • 路由参数的获取

    千次阅读 2021-07-05 13:20:41
    路由参数获取 意义在哪? 获取到url中的参数然后利用参数发起ajax请求,然后获取我们想要的数据 什么时候需要使用? 如文章详情,商品详情,使用相同的组件,渲染不同的数据,我们就可以通过传递不同的路由参数,...
  • 代码】解决uni-app小程序获取路由及路由参数
  • umi 获取路由参数

    千次阅读 2022-01-09 00:31:11
    在config.js里 添加路由 { // name: 'applications', // icon: 'smile', path: '/blog/show', component: './blog/...在路由query的参数存在props.location.query 结构里 const EditArticle: FC&l
  • vue3 监听路由参数

    千次阅读 2022-07-13 19:05:17
    vue3 监听路由参数
  • vue-router删除页面参数或清除地址栏路由参数
  • Vue3路由参数获取方式

    千次阅读 2022-05-25 08:37:45
    方法一:通过引入 “vue-router” 的 useRouter import { useRouter, onMounted } from 'vue-router' setup (props, context) { const router = useRouter(); onMounted(() => { ... console.log('router:', ...
  • vue3 获取当前路由参数

    千次阅读 2022-03-06 00:15:46
    <script> import {useRouter, useRoute} from 'vue-router' export default { setup(){ // 获取路由器实例 const router = useRouter() //使用 //router.push........ // route响应式对象,监控变化,...
  • 今天小编就为大家分享一篇vue实现路由监听和参数监听,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue3.0路由参数获取方法

    千次阅读 2021-10-15 09:32:17
    方法一:通过引入 "vue-router" 的 useRouter import { useRouter, onMounted } from 'vue-router' setup (props, context) { const router = useRouter(); onMounted(() => { ... console.log('router:', ...
  • vue清除地址栏路由参数

    万次阅读 2020-04-09 14:44:03
    let path = this.$route.path; //先获取路由路径 this.$router.push(path); //再跳转路由路径,query参数没带过去,所以被清除了
  • vue路由参数变化去刷新页面

    千次阅读 2022-04-20 20:53:16
    添加key,让其变化是重新渲染
  • ReactRouterV6获取当前路由参数

    千次阅读 2022-03-25 22:56:37
    ReactRouterV6获取当前路由参数 1.由于v6把旧版本中的路由组件能收到的三个参数(Location,history,match)移除了,所以不能直接使用this.props.location.pathname获取到当前路由。而且withRouter也移除了 2.在v6...
  • 在 Nuxt.js 里面定义带参数的动态路由,需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。 1.1、官方文档: 以下目录结构: pages/ --| _slug/ -----| comments.vue -----| index.vue --| users/ -----| _id...
  • 1. 代码 // 获取页面URL参数 ... //获取路由参数 const curPage = pages[pages.length - 1]; return name ? curPage.options[name] : curPage.options; } 2. 使用 //获取路由携带的id参数 let id = getLoca
  • vue设置获取路由参数

    千次阅读 2020-04-12 23:51:34
    一、router-link 标签url直接添加参数 1、路由设置 import PageB from '@/pages/PageB' { path: '/b', name: 'PageB', component: PageB } 2、设置参数 <router-link :to="'/b?name=张三&id=1234'"&...
  • 【Vue3.0】路由参数获取方式

    千次阅读 2021-11-19 13:47:50
    方法一:通过引入 “vue-router” 的 useRouter import { useRouter, onMounted } from 'vue-router' setup (props, context) { const router = useRouter(); onMounted(() => { // 打印 ...
  • angular7 路由配置与获取路由参数

    千次阅读 2020-01-18 16:33:58
    private cookie: CookieService, public router: Router) { } foo(){ this.router.navigate(['/manage/bill-o/123'], { queryParams: { id: 123, type: 'suibian' } }) } } 三、获取路由参数 1.导入相应的模块 ...
  • Vue3.0 - 路由参数的获取

    千次阅读 2021-09-13 17:29:53
    记录下vue3.0中路由参数的获取 具体实现 route.js const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/detail/:id', name: 'Detail', component: Detail } ] App.vue <...
  • vue跳转同一个路由参数不同

    千次阅读 2022-04-12 14:05:22
    问题:vue项目同一个路由跳转(路由不变,后面参数变化),第一次碰到这个问题的时候,搜了很多文章,大约是第一种解决方案,很顺利解决了。可是!!!在app上的时候,它地址变了刷新不了!! 第一种方法 window....
  • watch: { // 根据情况 $route.query 可以换成 $route.params "$route.query": { immediate: true, // 第一次的数据,也要当做是一种变化 // 处理函数(不能修改名字) handler('新的值','旧的值') ...
  • vue路由参数的修改和替换

    千次阅读 2021-02-26 12:12:13
    1、安装依赖 ...this.$router.push({ //修改原有参数id query:merge(this.$route.query,{'id':'23233'}) }) this.$router.push({ //新增一个参数teamName query:merge(this.$route.query,{'teamName':'新

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 392,247
精华内容 156,898
关键字:

路由参数