Vue动态路由的Query和Params传参方式

Vue动态路由的Query和Params传参方式

  • 一、Query传参
  • 二、Params传参
  • 两种传参方式的区别
    • Query
    • Params

一、Query传参


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态路由Query方式title>
    <script src="vue.js">script>
    <script src="vue-router.js">script>
head>
<body>
    <div id="app">
        <router-link tag="div" to="/login?id=1111&name=2222">登录router-link>
        <router-view>router-view>
    div>
    <template id="lg">
        <div>
            {
    {this.$route.query.id}}
        div>
    template>
    <script>
        var Login = {
      
            template:"#lg",
        }
        var router = new VueRouter({
      
            routes: [
                {
      path:"/login",component:Login}
            ]
        })
        var a = new Vue({
      
            el:"#app",
            router
        })
    script>
body>
html>

二、Params传参


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态路由params方法title>
    <script src="vue.js">script>
    <script src="vue-router.js">script>
head>
<body>
    <div id="app">
        <router-link tag="div" to="/login/1111/2222">登录router-link>
        <router-view>router-view>
    div>
    <template id="lg">
        <div>
            {
    {this.$route.params.id}}{
    {this.$route.params.name}}
        div>
    template>
    <script>
        var Login = {
      
            template:"#lg",
        }
        var router = new VueRouter({
      
            routes: [
                {
      path:"/login/:name/:id",component:Login}
            ]
        })
        var a = new Vue({
      
            el:"#app",
            router
        })
    script>
body>
html>

两种传参方式的区别

Query

Query方法的router-link里面的to,to="/login?id=1111&name=2222",
路由配置是

var router = new VueRouter({
            routes: [
                {path:"/login",component:Login}
            ]
        })

Query方式的网页地址栏后面是这样:
Vue动态路由的Query和Params传参方式_第1张图片

Params

Params方法的router-link里面的to,to="/login/1111/2222",
路由配置是

 var router = new VueRouter({
            routes: [
                {path:"/login/:name/:id",component:Login}
            ]
        })

Params方式的网页地址栏后面是这样:
Vue动态路由的Query和Params传参方式_第2张图片
注意Params传参的路由配置里,我故意把path里写成{path:"/login/:name/:id",component:Login},把name放到了前面,所以name排在第一位,对应router-link里面的to="/login/1111/2222"的第一位“1111”

{
    {this.$route.params.id}}{
    {this.$route.params.name}}

这两句获取参数是下面这样的,也就是id是2222,name是1111
Vue动态路由的Query和Params传参方式_第3张图片

你可能感兴趣的:(HTML,vue,javascript,vue.js,html,node.js)