Vue.js路由功能以及动态路由下的url传值和get传值

本文记录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传值。