精华内容
下载资源
问答
  • vue-router 基本使用

    万次阅读 多人点赞 2019-06-12 15:57:54
    vue-router 基本使用  路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮 => home 内容, about按钮 =>...

    vue-router 基本使用

      路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分。 

      点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容。这就要在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-router中的路由也是基于上面的内容来实现的

      在vue中实现路由还是相对简单的。因为我们页面中所有内容都是组件化的,我们只要把路径和组件对应起来就可以了,然后在页面中把组件渲染出来。

      1, 页面实现(html模版中)

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

      2, js 中配置路由

        首先要定义route,  一条路由的实现。它是一个对象,由两个部分组成: path和component.  path 指路径,component 指的是组件。如:{path:’/home’, component: home}

        我们这里有两条路由,组成一个routes: 

    const routes = [
      { path: '/home', component: Home },
      { path: '/about', component: About }
    ]

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

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

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

    const app = new Vue({
      router
    }).$mount('#app')

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

     vue-cli 创建一个项目体验一下, 当然不要忘记安装vue-router

      1, 在src 目录下新建两个组件,home.vue 和 about.vue

     

    <template>
        <div>
            <h1>home</h1>
            <p>{{msg}}</p>
        </div>
    </template>
    <script>
        export default {
            data () {
                return {
                    msg: "我是home 组件"
                }
            }
        }
    </script>

     

     

    <template>
        <div>
            <h1>about</h1>
            <p>{{aboutMsg}}</p>
        </div>
    </template>
    <script>
        export default {
            data () {
                return {
                    aboutMsg: '我是about组件'
                }
            }
        }
    </script>

     

      2, 在 App.vue中 定义<router-link > 和 </router-view>  

     

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <header>
        <!-- router-link 定义点击后导航到哪个路径下 -->
          <router-link to="/home">Home</router-link>
          <router-link to="/about">About</router-link>
        </header>
        <!-- 对应的组件内容渲染到router-view中 -->
        <router-view></router-view>   
      </div>
    </template>
    
    <script>
    export default {
      
    }
    </script>

     

      3,  在 src目录下再新建一个router.js 定义router, 就是定义 路径到 组件的 映射。

     

    import Vue from "vue";
    import VueRouter from "vue-router";
    
    // 引入组件
    import home from "./home.vue";
    import about from "./about.vue";
    
    // 要告诉 vue 使用 vueRouter
    Vue.use(VueRouter);
    
    const routes = [
        {
            path:"/home",
            component: home
        },
        {
            path: "/about",
            component: about
        }
    ]
    
    var router =  new VueRouter({
        routes
    })
    export default router;

     

      4, 把路由注入到根实例中,启动路由。这里其实还有一种方法,就像vuex  store 注入到根实例中一样,我们也可以把vueRouter 直接注入到根实例中。在main.js中引入路由,注入到根实例中。

     

    import Vue from 'vue'
    import App from './App.vue'
    
    // 引入路由
    import router from "./router.js"    // import router 的router 一定要小写, 不要写成Router, 否则报 can't match的报错
    new Vue({
      el: '#app',
      router,  // 注入到根实例中
      render: h => h(App)
    })

     

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

     

    const routes = [
        {
            path:"/home",
            component: home
        },
        {
            path: "/about",
            component: about
        },
        // 重定向
        {
            path: '/', 
            redirect: '/home' 
        }
    ]

     

      现在页面正常了,首次进入显示home, 并且点击也可以看到内容的切换。

    6, 最后,我们看一下路由是怎么实现的

      打开浏览器控制台,首先看到 router-link 标签渲染成了 a 标签,to 属性变成了a 标签的 href 属性,这时就明白了点击跳转的意思。router-view 标签渲染成了我们定义的组件,其实它就是一个占位符,它在什么地方,匹配路径的组件就在什么地方,所以 router-link 和router-view 标签一一对应,成对出现。

      这里还看到,当点击Home和About 来回切换时,a 标签有一个样式类 .router-link-active 也在来回切换, 原来这是当router-link 处于选中状态时,vueRouter 会自动添加这个类,因此我们也可以利用这个类来改变选中时的状态,如选中时,让它变成红色。但当设置 .router-link-active {color: red;},它并没有生效,这时还要在类前面加一个a, a.router-link-active {color: red;}, 这样就没有问题了。未处于选中状态的router-link, 我们也想给它更改样式,怎么办? 直接给它添加一个 class 就可以了, <router-link class="red">Home</router-link>

    动态路由

      上面我们定义的路由,都是严格匹配的,只有router-link 中的to属性和 js 中一条路由route中 path 一模一样,才能显示相应的组件component. 但有时现实却不是这样的,当我们去访问网站并登录成功后,它会显示 欢迎你,+ 你的名字。不同的用户登录, 只是显示“你的名字” 部分不同,其它部分是一样的。这就表示,它是一个组件,假设是user组件。不同的用户(就是用户的id不同),它都会导航到同一个user  组件中。这样我们在配置路由的时候,就不能写死, 就是路由中的path属性,不能写死,那要怎么设置? 导航到 user 组件,路径中肯定有user, id 不同,那就给路径一个动态部分来匹配不同的id.  在vue-router中,动态部分 以 : 开头,那么路径就变成了 /user/:id, 这条路由就可以这么写:  { path:"/user/:id", component: user }.

      我们定义一个user组件(自己随便写一个就好了),页面中再添加两个router-link 用于导航, 最后router.js中添加路由配置,来体验一下

      app.vue 中添加两个router-link:

     

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <header>
          <router-link to="/home">Home</router-link>
          <router-link to="/about">About</router-link>
         <!--  增加两个到user组件的导航,可以看到这里使用了不同的to属性 -->
          <router-link to="/user/123">User123</router-link>
          <router-link to="/user/456">User456</router-link>
        </header>
        <router-view></router-view>   
      </div>
    </template>

     

    router.js 配置user动态路由:

     

    const routes = [
        {
            path:"/home",
            component: home
        },
        {
            path: "/about",
            component: about
        },
        /*新增user路径,配置了动态的id*/
        {
            path: "/user/:id",
            component: user
        },
        {
            path: '/', 
            redirect: '/home' 
        }
    ]

     

      user组件

     

    <template>
        <div>
            <h1>User</h1>
            <div>我是user组件</div>
        </div>
    </template>
    <script>
        export default {
    
        }
    </script>

     

      这时在页面中点击user123 和user456, 可以看到它们都导航到user组件,配置正确。   

      在动态路由中,怎么获取到动态部分? 因为在组件中是可以显示不同部分的,就是上面提到的“你的名字”。其实,当整个vue-router 注入到根实例后,在组件的内部,可以通过this.$route 来获取到 router 实例。它有一个params 属性,就是来获得这个动态部分的。它是一个对象,属性名,就是路径中定义的动态部分 id, 属性值就是router-link中to 属性中的动态部分,如123。使用vuex时,组件中想要获取到state 中的状态,是用computed 属性,在这里也是一样,在组件中,定义一个computed 属性dynamicSegment, user 组件修改如下:

     

    <template>
        <div>
            <h1>User</h1>
            <div>我是user组件, 动态部分是{{dynamicSegment}}</div>
        </div>
    </template>
    <script>
        export default {
            computed: {
                dynamicSegment () {
                    return this.$route.params.id
                }
            }
        }
    </script>

     

      这里还有最后一个问题,就是动态路由在来回切换时,由于它们都是指向同一组件,vue不会销毁再创建这个组件,而是复用这个组件,就是当第一次点击(如:user123)的时候,vue 把对应的组件渲染出来,但在user123, user456点击来回切换的时候,这个组件就不会发生变化了,组件的生命周期不管用了。这时如果想要在组件来回切换的时候做点事情,那么只能在组件内部(user.vue中)利用watch 来监听$route 的变化。把上面的代码用监听$route 实现

     

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

     

    嵌套路由

      嵌套路由,主要是由我们的页面结构所决定的。当我们进入到home页面的时候,它下面还有分类,如手机系列,平板系列,电脑系列。当我们点击各个分类的时候,它还是需要路由到各个部分,如点击手机,它肯定到对应到手机的部分。

      在路由的设计上,首先进入到 home ,然后才能进入到phone, tablet, computer.  Phone, tablet, compute 就相当于进入到了home的子元素。所以vue  提供了childrens 属性,它也是一组路由,相当于我们所写的routes。

      首先,在home页面上定义三个router-link 标签用于导航,然后再定义一个router-view标签,用于渲染对应的组件。router-link 和router-view 标签要一一对应。home.vue 组件修改如下:

     

    <template>
        <div>
            <h1>home</h1>
    <!-- router-link 的to属性要注意,路由是先进入到home,然后才进入相应的子路由如 phone,所以书写时要把 home 带上 -->
            <p>
                <router-link to="/home/phone">手机</router-link>
                <router-link to="/home/tablet">平板</router-link>
                <router-link to="/home/computer">电脑</router-link>
            </p>
            <router-view></router-view>
        </div>
    </template>

     

    router.js 配置路由,修改如下:

     

    const routes = [
        {
            path:"/home",
         // 下面这个属性也不少,因为,我们是先进入home页面,才能进入子路由
            component: home,
         // 子路由
            children: [
                {
                    path: "phone",
                    component: phone
                },
                {
                    path: "tablet",
                    component: tablet
                },
                {
                    path: "computer",
                    component: computer
                }
            ]
        },
        {
            path: "/about",
            component: about
        },
        {
            path: "/user/:id",
            component: user
        },
        {
            path: '/', 
            redirect: '/home' 
        }
    ]

     

      这时当我们点击home 时,它下面出现手机等字样,但没有任何对应的组件进行显示,这通常不是我们想要的。要想点击home时,要想渲染相对应的子组件,那还需要配置一条路由。当进入到home 时,它在children中对应的路由path 是空 ‘’,完整的childrens 如下:

     

    children: [
        {
            path: "phone",
            component: phone
        },
        {
            path: "tablet",
            component: tablet
        },
        {
            path: "computer",
            component: computer
        },
        // 当进入到home时,下面的组件显示
        {
            path: "",
            component: phone
        }
    ]

     

    命名路由

      命名路由,很简单,因为根据名字就可以知道,这个路由有一个名字,那就直接给这个路由加一个name 属性,就可以了。 给user 路由加一个name 属性:

    {
            path: "/user/:id",
            name: "user",
            component: user
    }

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

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

      编程式导航:这主要应用到按钮点击上。当点击按钮的时候,跳转另一个组件, 这只能用代码,调用rourter.push() 方法。 当们把router 注入到根实例中后,组件中通过 this.$router 可以获取到router, 所以在组件中使用

    this.$router.push("home"), 就可以跳转到home界面

     

    vue-router的push和replace的区别

    1.this.$router.push()

    描述:跳转到不同的url,但这个方法会向history栈添加一个记录,点击后退会返回到上一个页面。

    2.this.$router.replace()

    描述:同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。

    3.this.$router.go(n)

    相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面

     

    转自https://www.cnblogs.com/SamWeb/p/6610733.html

    展开全文
  • RouterOS RouterOS

    2011-10-25 17:16:37
    RouterOS RouterOS RouterOS RouterOS RouterOS RouterOS RouterOS RouterOS RouterOS
  • vue-router传递参数的几种方式

    万次阅读 多人点赞 2018-07-06 16:24:29
    vue-router传递参数分为两大类编程式的导航 router.push声明式的导航 &lt;router-link&gt;编程式的导航 router.push编程式导航传递参数有两种类型:字符串、对象。字符串字符串的方式是直接将路由地址以字符...

    vue-router传递参数分为两大类

    • 编程式的导航 router.push
    • 声明式的导航 <router-link>

    编程式的导航 router.push

    编程式导航传递参数有两种类型:字符串、对象。

    字符串

    字符串的方式是直接将路由地址以字符串的方式来跳转,这种方式很简单但是不能传递参数:
    this.$router.push("home");
    

    对象

    想要传递参数主要就是以对象的方式来写,分为两种方式:命名路由、查询参数,下面分别说明两种方式的用法和注意事项。

    命名路由

    命名路由的前提就是在注册路由的地方需要给路由命名如:

    命名路由传递参数需要使用params来传递,这里一定要注意使用params不是query。目标 页面接收传递参数时使用params

     特别注意:命名路由这种方式传递的参数,如果在目标页面刷新是会出错的

    使用方法如下:

    this.$router.push({ name: 'news', params: { userId: 123 }})

    代码如下:

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <button @click="routerTo">click here to news page</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      methods:{
        routerTo(){
          this.$router.push({ name: 'news', params: { userId: 123 }});
        }
      }
    }
    </script>
    
    <style>
    </style>

    接受传递的参数:

    <template>
      <div>
        this is the news page.the transform param is {{this.$route.params.userId}}
      </div>
    </template>
    <script>
      
    </script>

    运行效果如下:


    查询参数

    查询参数其实就是在路由地址后面带上参数和传统的url参数一致的,传递参数使用query而且必须配合path来传递参数而不能用name,目标页面接收传递的参数使用query。
    注意:和name配对的是params,和path配对的是query
    使用方法如下:
    this.$router.push({ path: '/news', query: { userId: 123 }});

    代码如下:

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <button @click="routerTo">click here to news page</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      methods:{
        routerTo(){
          this.$router.push({ path: '/news', query: { userId: 123 }});
        }
      }
    }
    </script>
    
    <style>
    </style>

    接收参数如下:

    <template>
      <div>
        this is the news page.the transform param is {{this.$route.query.userId}}
      </div>
    </template>
    <script>
    </script>
    运行效果如下:


    声明式的导航

    声明式的导航和编程式的一样,这里就不在过多介绍,给几个例子大家对照编程式理解,例子如下:

    字符串

    <router-link to="news">click to news page</router-link>

    命名路由

    <router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>
    运行效果如下:

    查询参数

    <router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>
    运行效果如下:

    最后总结:路由传递参数和传统传递参数是一样的,命名路由类似表单提交而查询就是url传递,在vue项目中基本上掌握了这两种传递参数就能应付大部分应用了,最后总结为以下两点:
    1.命名路由搭配params,刷新页面参数会丢失
    2.查询参数搭配query,刷新页面数据不会丢失
    3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值

    如果觉得有帮助请支持我吧!







    展开全文
  • Vue中this.$router.push(参数) 实现页面跳转

    万次阅读 多人点赞 2019-05-22 16:58:40
    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用this.$router.push(location)来修改 url,完成跳转。 push 后面可以是对象,也可以是字符串: // 字符串 this.$router.push('/home/...

            很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转。

    push 后面可以是对象,也可以是字符串:

    // 字符串
    this.$router.push('/home/first')
    // 对象  query相当与发送了一次get请求,请求参数会显示在浏览器地址栏中
    this.$router.push({ path: '/home/first' })
    // 命名的路由   params相当与发送了一次post请求,请求参数则不会显示,并且刷新页面之后参数会消失
    this.$router.push({ name:'Login', params: { id: this.id } )
    
    // 当路由配置更改为
    //路由配置:
    
    //{path:'/login/:id',name:'Login',component:Login}
    
    //并且再次发送请求,请求数据不会随着页面的刷新而消失

    跳转页面并传递参数的方法:

    1.Params

    由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。

    及通过路由配置的name属性访问

    在路由配置文件中定义参数:

    /* router.js 文件*/
    import Vue from "vue";
    import Router from "vue-router";
    import MediaSecond from "@/views/EnterprisePage/MediaMatrix/second"; //资讯列表
    
    Vue.use(Router);
    export default new Router({
      routes: [ /* 进行路由配置 */
        {
            name: "MediaSecond",
            path: "/MediaSecond",
            component: MediaSecond
        },
      ]
    })
    
    /* 后面还需要接一空行,否则无法通过 ESlint 语法验证 */
    

    通过name获取页面,传递params:

    this.$router.push({ name: 'MediaSecond',params:{artistName:artistName,imgUrl:imgUrl,type:2} })

    在目标页面通过this.$route.params获取参数:

    if (this.$route.params.type == 2) {
        this.type = apis.getAtistDetails;
    } else {
        this.type = apis.getMessageList;
    }

    2.Query

    页面通过path/name和query传递参数,该实例中row为某行表格数据

    this.$router.push({ name: 'DetailManagement', query: { auditID: row.id, type: '2' } });
    this.$router.push({ path: '/DetailManagement', query: { auditID: row.id, type: '2' } });

    在目标页面通过this.$route.query获取参数:

    this.$route.query.type

    展开全文
  • 如何使用router-link对象方式传递参数?

    万次阅读 多人点赞 2018-05-11 01:05:43
    如何使用router-link对象方式传递参数? 疑问:(判断和传参) 点击导航栏目,js如何判断自己点击的是哪个具体栏目? 它们是如何传参的? 效果图解说: A. 点击选择【屈原“查看详情”】之前 ...

    如何使用router-link对象方式传递参数?

    疑问:(判断和传参)

    1. 点击导航栏目,js如何判断自己点击的是哪个具体栏目?
    2. 它们是如何传参的?
      如何使用params,携带查询参数?

    效果图解说:

    A. 点击选择【屈原“查看详情”】之前

    未点击选择之前

    B. 点击选择【屈原“查看详情”】之后

    点击选择之后


    要点总结:

    vue-router中,有两大对象被挂载到了实例this
    $route(只读、具备信息的对象)
    $router(具备功能的函数)

    查询字符串:
    1. 去哪里 ?
      <router-link :to="{name:'detail',query:{id:1}}"> xxx </router-link>
    2. 导航(查询字符串path不用改)
      {name:'detail',path:'/detail',组件}
    3. 去了干嘛?获取路由参数(要注意是 query ,还是 params 和 对应的 id名? 是后者需要注意设置相关文件的id规则)
      + this.$route.query.id
    path方式:
    1. 去哪里 ?
      <router-link :to="{name:'detail',params:{name:1}}"> xxx </router-link>
    2. 导航(查询字符串path不用改)
      {name:'detail',path:'/detail/:name',组件}
    3. 去了干嘛?获取路由参数(要注意是 query ,还是 params 和 对应的 name名? 是后者需要注意设置相关文件的id规则)
      + this.$route.params.id

    相关文件代码:


    1. main.js文件

    import Vue from 'vue';
    import VueRouter from 'vue-router';
    //引入主体(页面初始化显示)
    import App from './components/app.vue';
    //一个个link对象 - 分类
    import Detail from './components/detail.vue';
    import List from './components/list.vue';
    
    //安装插件
    Vue.use(VueRouter);//挂载属性
    
    //创建路由对象并配置路由规则
    let router = new VueRouter({
    	//routes
    	routes: [
    	//一个个link对象
        {name: 'detail',path: '/detail',component: Detail},
        //此处的path规则不受list.vue中的query(匹配参数规则的)影响
        {name: 'list',path: '/list',component: List}
      ]
    });
    
    /* new Vue 启动 */
    new Vue({
      el: '#app',
      render: c => c(App),
      //让vue知道我们的路由规则
      router:router,//可以简写为router
    })
    
    

    2. app.vue文件

    <template>
      <div>
      	<div class="header">
      		头部 - 导航栏目
      		
      		<p>
    	  		<router-link :to="{name:'detail'}">细节列表1</router-link>
    	  		<router-link :to="{name:'list'}">英雄列表1</router-link>
      		</p>
      	</div>
      	
      	<!--留坑,非常重要-->
    		<router-view class="main"></router-view>
    		
    		<div class="footer">底部 - 版权信息</div>
    		
      </div>
    </template>
    
    <script>
    	export default {
    	  data(){
    	  	return{
    	  		
    	  	}
    	  },
    	  methods:{
    	  	
    	  }
    	}
    </script>
    
    <style scoped>
    	.header,.main,.footer{text-align: center;padding: 10px;}
    	
    	.header{height:70px;background: yellowgreen;}
    	.main{height:300px;background: skyblue;}
    	.footer{height: 100px;background: hotpink;}
    </style>
    
    

    3. list.vue文件

    <template>
    	<div>
    		我是list列表
    		<!-- :key是绑定器 -->
    		<!-- query是查询字符串,加查询参数 ,相当于查询规则;对比参考main.js关于路由配置path属性-->
    		<ul>
    			<li v-for="(hero,index) in heros" :key="index">
    				{{hero.name}}
    				<router-link :to="{name:'detail',query:{id:index}}">查看详情</router-link>
    			</li>
    		</ul>
    	</div>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    				heros:[{
    					name:'李白'
    				},{
    					name:'杜甫'
    				},{
    					name:'屈原'
    				},{
    					name:'白居易'
    				},{
    					name:'李清照'
    				},{
    					name:'欧阳修'
    				}]
    			}
    		}
    	}
    </script>
    
    <style scoped>	
    	ul,li{list-style: none;}
    </style>
    

    4. detail.vue文件:(可以在控制台查看打印结果)

    <template>
    	<div>
    		我是详情
    	</div>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    				
    			}
    		},//DOM尚未生成
    		create(){
    			//获取路由参数
    			//vue-router中挂载两个对象的属性
    			//$route(信息数据)
    			//$router(功能函数)
    			/*console.log(this.$route.params);*/
    			console.log(this.$route.query);
    			
    		},//已经将数据装载到页面上去了,DOM已经生成
    		mounted(){
    			
    		}
    	}
    </script>
    
    <style>
    </style>
    

    以上就是关于“如何使用router-link对象方式传递参数?”的全部内容。

    展开全文
  • vue动态修改$router参数

    万次阅读 2018-05-14 17:47:42
    vue动态修改$router参数 import merge from 'webpack-merge'; 修改原有参数 this.$router.push({ query:merge(this.$route.query,{'maxPrice':'630'}) }) 新增一个参数: this.$router.push({ query:merge...
  • 1 this.$router和this.$route的区别 vue router this.$router是VueRouter的实例方法,当导航到不同url,可以使用this.$router.push方法,这个方法则会向history里面添加一条记录,当点击浏览器回退按钮或者this.$...
  • vue-router router-link

    千次阅读 2019-06-02 06:18:46
    个人理解vue-router能够实现当我们点击某个导航链接的时候能够动态的展示一个组件...import Vuerouter fom 'vue-router //加载路由模块 Vue.use(VueRouter) //注册到Vue中才可以使用 配置路由表 const router ...
  • vue-router(路由)详细教程

    万次阅读 多人点赞 2018-05-28 21:08:30
      由于Vue在开发时对路由支持的不足,于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的...
  • $router VS $route

    万次阅读 2021-01-11 13:32:39
    $router是一个VueRouter的实例 可以导航到不同的路由里 $route是$router跳转到的当前一个对象,里面包含该对象的path、query、name 、params 用法 : this.$router.push() 跳转到指定的url 会向history栈添加一...
  • React-Router Demo

    2017-11-15 23:56:41
    React-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router ...
  • router实例方法router.addRoutes

    千次阅读 2020-03-23 14:58:03
    前端在做路由验证时,使用router.Routes动态添加路由非常方便。 以下是后台返回的一组路由表,根据路由中的name字段判断此路由对应的组件是否显示: import Vue from 'vue' import VueRouter from 'vue-router' ...
  • 1、router.push():导航到不同的 url,向 history 栈添加一个新的记录。(=== window.history.pushState) 声明式 编程式 <router-link :to=""> router.push() // 字符串 router.push('home') // ...
  • React-Router实战:重定向Redirect

    万次阅读 2019-03-23 18:55:45
    当用户访问某界面时,该界面并不存在,此时用Redirect重定向,重新跳到一个我们自定义的组件里。...import { Route, Redirect } from 'react-router' <Route exact path="/" render={() => ( ...
  • vue-router addRouter 实现 动态路由

    千次阅读 2019-07-24 17:31:28
    vue-router 中有一个 api ,名曰 addRouter router.addRoutes(routes: Array<RouteConfig>) addRouterrouter 实例的一个方法, 可以动态添加更多的路由规则 这个 api ,可以让你的 router 配置,不用...
  • router.push 想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。 &lt;router-link :to="..."&...
  • router配置文件 import Vue from 'vue' import Router from 'vue-router' import index from '@/pages/index' import fenlei from '@/pages/fenlei' Vue.use(Router) export default new Router({ mode : "...
  • 关于router-link和router-view

    千次阅读 2020-11-24 22:26:39
    router-link和router-view在同一个vue文件(A.vue)里面,router-link设置路由跳转,router-view根据路由显示组件 在同一个页面中,A.vue组件是全局的页面,B.vue组件和C.vue组件是A页面中的一部分 1,router-...
  • vue-router 中 meta的用法

    万次阅读 2018-06-30 14:48:05
    如果我想做下面这个功能:路由代码:用这个获取
  • vue[导航切换router-link、router-view、router的使用]
  • 一、vue-router是什么? Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有: 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 376,892
精华内容 150,756
关键字:

router