Vue路由的使用方法

作为一个Vue的初学者，今天主要分享一下Vue路由的基本使用方法，以及如何使用Vue CIL快速的创建一个Vue项目，若有那点不对，请及时提出，谢谢各位。

一、VUe CLI的使用方法

全局安装：  

npm install -g vue-cli

创建项目 

vue create 项目名

项目目录大概如下：

二、安装路由

1、Vue中路由的安装：

npm i vue-router

2、在创建的项目中引入安装的路由

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

3、全局使用组件  在main.js文件中

Vue.use(VueRouter);

4、创建所需的路由     

   var router=new VueRouter({routes:[{},{}]})

以下是我创建的路由：

注意：里面的routes不能改，表示路由配置信息

//创建路由
const router=new VueRouter({
  //注意：为routes,不然无结果
  //routes表示路由配置信息，路由表
  routes:[{
    path:'/home', //表示路由地址，此地址在浏览器的地址栏中输入
    component:Home, //路由地址对应的组件
    name:"Home",
  },{
    path:'/list',
    component:List,
    name:"List",
  },{
    path:'/cart1',
    component:Cart,
    name:"Cart",
  },{
    path:'/l/:id',  //params传参 路由传参 :id表示路由中传递的参数
    component:Detail,
    name:'Detail'
  }]
})

每一条路由记录都需要在components文件夹下创建对应的组件文件

这是其中的一个组件文件Cart.vue内容：

 

<template>
  <div class="home">
    <h2>购物车页面</h2>
  </div>
</template>

<script>
export default {
  
}
</script>
<style scoped>
/* scoped 表示样式的作用范围在当前组件有效 */
</style>

注意：需要将创建的组件文件进行引入，例如： import   Cart（自己起名字）    from './components/Cart.vue（路径）'

这个自己起的Cart 对应路由中的component

5、路由基础用法

当我们在入口文件（main.js）中使用了VueRouter，可以在模板(App.vue)使用router-view（所有组件都会放在此标签里）

 

以后所有的路由对应的组件都会渲染在此节点内router-view

在App.vue中一般通过a标签来使用路由

 <a href="#/home">【首页】</a>
 <a href="#/list">【列表页】</a>
 <a href="#/cart1">【购物车】</a>

 <router-link  to='/home'>【首页-link】</router-link>

 <!--  当路由地址发生变化时，不会影响  建议绑定路由用name-->
 <router-link :to="{name:'Home'}">【首页-name】</router-link>

以上几种方法都可以，但是最后一种比较好，当修改路由地址后，不会受到影响

 

最后在终端输入npm run serve 

 

在浏览器器中输入以下任意一个

这就是路由的基本用法。

三、路由嵌套

 

在做路由嵌套的时候可以使用children属性实现

         里面跟着一个数组（存放组件）

注意：在需要嵌套的组件中添加 <router-view></router-view>用来放子组件

以下通过简单代码进行演示：

比如我在Home组件中添加子组件，在对应路由下面加一个children对象，里面的内容还是我们熟悉的写法

但是需要在Home.vue中添加一个router-view标签用来显示子组件

在路由中path有两种写法

     （1）path:'/user', // path加/会直接跳到根节点(name的整个地址都会被替换)

       （2）'order', //path不加/，会在父路由的path后面进行拼接

 

可以将所有的路由进行封装

router.js

 在路由文件导出  export default router;

    在main.js引入

    import router from './router'

在main.js中的vue实例中，添加router

 

四、路由传参

 

vue-router页面传递参数的两种方式

使用params传参  url/:参数

        需要在路由表中做配置，如果不在路由中进行配置也可以进行传递

         在router-link中设置需要传递的参数

        如果使用to+path进行跳转，需要传递的参数是必须在路由表中进行配置

        如果使用 :to 绑定一个对象传递参数，那么多余的参数可以不用进行配置直接传递

 

在获取参数的时候用this.$route.params进行获取

或者this.$route.query获取url中传递的参数以?形式分割

 

在列表页添加数据并能到详情页

列表页数据：

<script>
export default {
  data(){
    return{
      list: [{
        id: 1,
        name: '原始时代',
      }, {
        id: 2,
        name: '流浪地球',
      }, {
        id: 3,
        name: '惊奇队长',
      }, {
        id: 4,
        name: '复仇者联盟4'
      }, {
        id: 5,
        name: '蜘蛛侠-英雄远征'
      }]
    }
  }
}
</script>

显示数据的三种方法：

通过params进行传递参数  参数形式:/id，在浏览器显示：url/参数

（1）通过name传参

路由设置

（2）通过path,以字符串拼接方式传参

（3）使用query形式进行传值，浏览器显示：url?参数1&参数2

在详情页可以通过以下两种方法获取参数：

this.$route.params

this.$route.query

详情页代码如下：

<template>
  <div class="movie">
    传递的参数为：{{id}}.{{name}}
  </div>
</template>
<script>
export default {
  data(){
    return{
      id:'',
      name:''
    }
  },
  created(){
    console.log(this.$route); //获取当前的路由信息
    console.log(this.$router);
    this.id=this.$route.params.id;
    this.name=this.$route.params.name
    //this.$route.params  获取通过params传递的参数
    //this.$route.query   获取通过url传递的参数
  },
}
</script>

通过console.log(this.$route)可以显示

因此，可以通过此方法来获取自己想要得到的参数值。

 

以上就是今天的分享，欢迎各位大神指点！！！