vue-router初学习-一一网

一、vue-router安装方式

安装vue-router，因为vue框架讲究的是渐进式框架，所以vue核心是不提供vue-route插件的，是待到使用的时候，用户自己去加载的，加载的方式有以下几种：

npm安装

在使用vue-cli脚手架的使用，这样既可以很方便的使用vue-router，因为你可以在创建vue项目的时候，就可以指定是否安装vue-router，如果在床i昂项目的时候没有安装vue-router，好可以使用包管理工具npm进行单独的安装。

npm install -g vue-router
复制代码

直接下载vue-router文件，本地引入

如果你没有使用vue-cli创建vue项目，而是自己搭建项目的，你可以考虑使用将vue-router文件直接下载到本地，然后象引入其他的JavaScript文件一样直接去引用该路由插件。

<script src="../lib/vue-router.js" ></script>
//上面的src中的地址就是你存放vue-router.js文件的地址。
复制代码

使用CDN

这种方式类似于下载到本地，然后使用script标签引入，不同的是，这个文件是不用下载到本地直接引用CDN就可以使用了。

上面的几种方式，根据不同的场景，选择不同的方式，但是我更推荐，在学完vue基础，开始学习vue-cli脚手架的使用，多使用包管理的方式，这样可以经常锻炼，而且以后的开发中，使用vue-router或者其他的插件扩展，基本上就是npm包管理的方式。

二、创建项目并使用

先创建一个vue项目，创建项目的同时就安装vue-router

vue create router-demo
//然后选择   Manually select features自定义选项
//下面会出现让你自己选择的一些插件和扩展，你剋选择安装哪一些
//选上Router以后你就可以放心的使用vue-router了。
复制代码

vue-router插件有两个非常重要的组件,一个是：

这个组件是说明了你点击的时候，路由会指向哪里？指向什么组件？

</ router-view>这个是展现，你点击的路由标签所指向的组件。

<router-link to="指向的组件的地址" tag="表示将这个标签渲染成HTML中的何种标签"></router-link>
//to 属性是跳转的路径，其实是和routes路由配置中的path属性是同样的。
//router-link-active属性是表明现在指向的哪一个标签，起到突出的作用。只要to属性中的地址和地址栏中
//是一样的，那么router-link-active就会自动的激活。
复制代码

自定义router-link-active激活的class名称，就是将那么长的一大串换一下名字，并且可以自定义，是在路由配置文件中的`new vueRouter({
//与路由配置变量routes同级

linkActiveClass,

routes
复制代码
})`

<router-view> </router-view>
//这个标签是为了渲染展示，上面链接所指向的路径中的组件
复制代码

三、路由传值

路由跳转，页面之间传值

1、query传值 ?id=””

//home页面传值
<router-link :to="/about?id=${item.id}">{{item.name}}</router-link>
//about页面接受传过来的值
console.log(this.$route.query.id);
复制代码

上面那样就可以取到home页面传递过来的id数值了,原理就是路由跳转传值，当使用的是query传值法的时候，在另外一个页面就可以使用$route对象中的query数据，下面的你传递过来的参数的名字。

动态路由传值

在路由配置文件的routes数组中，配置如下：

const routes = [
  {
    path: './',
    name: "home",
    component: Home
  },{
    path: '/info/:id',
    component: info
  }
]
//上面的path中/后面跟着冒号：和参数名字id就是动态路由的写法吗，这样传值更加的方便，
//在info页面获取到传递过来的参数
this.$route.params.id
//这样就可以获取到另外页面获取到的参数了。
复制代码

当需要传递多个参数时候，和传递一个参数的是一样的，利用/:参数名链接的形式，一直向后面链接，获取参数也和原来一样使用的params获取到传递过来的参数。

小结一下两种传值方式，第一种利用?参数=数值这种方式是比较传统的方式，后面使用的动态路由的方式是现在比较新的方式，所以更推荐现在这种利用:参数名这种方式，然后利用this.$route.params.参数名这种方式去取值。

四、嵌套路由

嵌套路由在我的理解就是，一个路由页面中又会有其他的路由子页面，可能其他的路由子页面还会有其他的子页面，这就是嵌套路由的概念。

嵌套路由的写法是在父路由中添加一个children属性，这个属性就是嵌套路由的写法，代表着children属性下面的路由都是子路由，代表着父页面的下面的子页面。比如在name页面中存在着abcd四个子页面，那么，我就可以设置嵌套路由：

const routes = [
  {
    path: "/name",
    name: 'name',
    component: name,
    children: [
      {
        path: 'a',
        component: a
      },
      {
        path: "b",
        component: b
      },
      {
        path: "c",
        component:c
      },
      {
        path: "d",
        component: d
      }
    ]
  }  
]
//在写嵌套路由的时候，path中就不要再加入/斜线了。
复制代码

需要注意一点的就是一旦加上了嵌套路由，还要再子路由的，,需要将to属性路由的指向更新一下，前面加上他的父路由的地址。也别忘记再name页面加上这样才会再你点击子路由时候跳转到子路由并且会将子路由的页面给渲染出来。

如果默认想进入到name页面的时候，就让abcd某个页面就渲染出来，可以使用属性redirect在父页面中去指定这个属性，属性值就是某个子页面，/name/b这样你只要打开name页面就会指向一个默认的子页面b。

五、路由跳转的几种方式

字符串方式

<router-link :to="/about?id=${item.id}">{{item.name}}</router-link>
//我们一直经常使用的方式就是字符串跳转的方式
复制代码

对象方式

<router-link :to="{path: '/about'}">{{item.name}}</router-link>
//对象方式的跳转，就和我们在路由配置文件中的路由配置对象中差不多，这里的path其实
//就是配置对象中的path。
<router-link :to="{path: '/about',query:{id :3 }}">{{item.name}}</router-link>
复制代码

对象方式的路由跳转，再利用query方式传值似乎很方便，只需要再对象中再加入一个query：{}对象，里面是传入的参数，取值，还是再跳转页面中利用，this.$route.query.参数名，来获取到传递到的参数。

对象的写法传递动态路由的参数

对象的写法，通过动态路由传值，是不可以直接进行传值的，如果需要传递的话，需要使用命名路由的方式。

<router-link :to="{path: '/about',query:{id :3 }}">{{item.name}}</router-link>
//上面是对象路由的query传值，但是针对于对象方式的动态路由是不可取的，
<router-link :to="{name: 'about',params:{id :3 }}">{{item.name}}</router-link>
//这样就可以实现对象方式的动态路由的传值，将path改变成name，query传值方式改变成params
//但是在路由配置文件中的配置变量是需要为路由写上name属性的。
{
  path:"./",
  name: 'about',
  component: about
}
复制代码

js的方式实现路由跳转

javascript方式跳转就是定义事件，然后在事件中通过$router来进行指定路由的跳转。

$route:代表的是当前的路由对象，仅仅是一个路由对象

$router:代表的是整个的路由对象，可以理解为routes所有的路由对象

<button @click=""goto()></button>
export default{
  methods: {
    goto(){
      this.$router.push("path（路径）")；
    }
  }
}
//第二种，对象的形式
export default{
  methods: {
    goto(){
      this.$router.push({
        path: '/路径'
      })；
    }
  }
}
复制代码

router的基本配置。

const router = new VueRouter({
  linkActiveClass: "active",//改变样式类名
  mode:"",//跳转方式，默认为hash方式，还可以改变成HTML5的history方式，这种没有#
  routes  //路由规则配置项
})
复制代码