本文记录Vue.js如何使用路由功能(包括设置默认路由、路由跳转)以及使用动态路由(url传值)和get传值。

Vue.js下使用路由功能

要使用路由功能必须先在项目中安装官方提供的vue-router库,cmd进入项目文件夹,安装命令如下:

npm run vue-router --save    //--save表示写入依赖文件

回车进行安装: 

  

 

第一步:vue-router安装完成之后,创建两个组件。 

新建两个组件,分别为:新闻列表组件(News.vue)、商品列表组件(Goods.vue)。

目录截图:(忽略GoodsContent和NewsContent,这两个组件是后面传值需要用到的)

News.vue

<template>
    <div>
      <h2>{{ msg }}</h2>
      <ul>
        <li v-for="(item,key) in newsList">{{ item }}</li>
      </ul>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                msg:'这是新闻列表页',
              newsList:['新闻1','新闻2','新闻3']
            }
        }
    }
</script>

Goods.vue

<template>
    <div>
      <h2>{{ msg }}</h2>
      <ul>
        <li v-for="(item,key) in goodsList">{{ item }}</li>
      </ul>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                msg:'这是商品列表页',
              goodsList:['商品1','商品2','商品3']
            }
        }
    }
</script>

第二步:在main.js文件中引入vue-router并use这个插件库:  

//引入vue-router
import VueRouter from 'vue-router'

//use插件
Vue.use(VueRouter);

第三步:在main.js中import刚刚新建的那两个组件:

//新建并引入组件
import News from './components/News.vue';
import Goods from './components/Goods.vue';

第四步:在main.js中进行路由的定义和配置

//定义配置路由
const routes = [
  { path: '/news', component: News },
  { path: '/goods', component: Goods },
  { path:'*', redirect: '/news' },   /*默认跳转路由,若路由未匹配到,则默认跳转到news组件*/
];

第五步:实例化路由

//实例化路由
const router = new VueRouter({
  routes // (缩写)相当于 routes: routes
});

 第六步:在vue实例中挂载路由

//挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

第七步:在根组件(App.vue)使用路由

    <!--使用路由-->
    <router-view></router-view>

路由配置完成。看下效果:在浏览器地址栏输入http://localhost:8080,回车后,不出意外url自动变成了http://localhost:8080/#/news(因为在路由中配置了默认路由,即默认跳转到news组件)

在浏览器中输入http://localhost:8080/#/goods,页面进行跳转:

 也可以模拟导航栏点击相应导航进行跳转,需要在App.vue中使用<router-link></router-link>标签:

    <!--模拟导航栏-->
    <router-link to="/news">新闻</router-link>
    <router-link to="/goods">商品</router-link>

效果如下:

 

总结:

  1. 安装官方支持的 vue-router 库
  2. 在main.js中分别进行:引入vue-router、use这个插件、引入刚刚新建好的两个组件、定义配置路由、实例化路由、在vue实例中挂载路由
  3. 在根组件(App.vue)中通过<router-view></router-view>标签使用路由

最后贴上main.js代码和App.vue代码:

main.js:

import Vue from 'vue'
import App from './App.vue'
//引入vue-router
import VueRouter from 'vue-router'

//use插件
Vue.use(VueRouter);

//新建并引入组件
import News from './components/News.vue';
import Goods from './components/Goods.vue';

//定义配置路由
const routes = [
  { path: '/news', component: News },
  { path: '/goods', component: Goods },
  { path:'*', redirect: '/news' },   /*默认跳转路由,若路由未匹配到,则默认跳转到news组件*/
];

//实例化路由
const router = new VueRouter({
  routes // (缩写)相当于 routes: routes
});

//挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

App.vue:

<template>
  <div id="app">
    <h1>{{ msg }}</h1>

    <!--模拟导航栏-->
    <router-link to="/news">新闻</router-link>
    <router-link to="/goods">商品</router-link>

    <!--使用路由-->
    <router-view></router-view>

  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

以上就是记录vue的路由功能的使用过程。


动态路由之url传值

实现功能:点击商品列表里的项,地址栏url会传递当前列表项的key值,并且跳转至相应的商品详情页。

第一步:新建商品详情组件(GoodsContent.vue)

在商品详情组件中获取url传递过来的值,并将值显示在详情页中。代码如下:

<template>
    <div>
      <p>{{ msg }}</p>
      <p id="goodsID">商品id:</p>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                msg:'商品详情页',
            }
        },
      mounted(){
        //获取url参数
        var objParams = this.$route.params;
        //将前一个页面传过来的aid显示在相应p标签中
        document.getElementById('goodsID').innerHTML += objParams.aid; 
      }
    }
</script>

第二步:在main.js文件中引入商品详情组件(GoodsContent.vue)

第三步: 在main.js中的路由配置里面加上这个路由,注意path的写法

第四步: 在Goods.vue中给每个商品加上指向链接,以及需要传递的参数值

注意:因为这时候的key是动态变化的,你点击不同的商品对应的key值也不用,所以根据vue中动态属性绑定的规则,需要在to之前加上v-bind,也可以简写成一个:冒号。

点击每个商品链接,将会跳转至对应的商品页,注意看地址栏url后面的参数,效果如下:

点击商品1,跳转:

点击商品2,跳转:

 

因为传递的key值是从0开始的,所以点击商品1、2、3会相应传递0、1、2的值。

以上就是vue动态路由的url传值。


动态路由之get传值

实现功能:点击新闻列表里相应的项,将key值通过get方式传递到新闻详情页。

第一步:新建新闻详情组件(NewsContent.vue)

在里面获取到前一个页面get过来的值,并显示在详情页中。

<template>
    <div>
      <p>{{ msg }}</p>
      <p id="newsID">新闻id:</p>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                msg:'新闻详情页'
            }
        },
      mounted(){
        //获取get过来的值
        var objParams = this.$route.query;
        //将前一个页面传过来的id显示在相应p标签中
        document.getElementById('newsID').innerHTML += objParams.id;
      }
    }
</script>

第二步:在main.js中,引入新闻详情组件(NewsContent.vue)

 

第三步:在main.js的路由配置中,加上这个路由,注意path的写法

第四步: 在News.vue中给每个新闻加上指向链接,以及需要传递的参数值

同样也需要注意是绑定动态属性,需要加上v-bind指令或者简写:冒号

点击每个新闻链接,将会跳转至对应的新闻页,注意看地址栏url后面的参数,效果如下:

点击新闻1:

同样,点击新闻2、3会把相应的key值get到链接指向的页面。

以上就是vue动态路由的get传值。

 

 

Logo

前往低代码交流专区

更多推荐