vue-router 简单的路由实现

 路由的基本概念：

route：它是一条路由；toutes  ：是一组路由，把单个的路由进行合并，形成一个数组；router:是一个机制，来管理路由； 

客户端中的路由，实际上就是dom元素显示和隐藏；客户端路由有两种实现方式：基于hash和基于html5 history api;   

安装： 

小知识点：  

-D就是--save-dev 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面，而--save会将包的名称及版本号放在dependencies里面。

devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的

 

(1) 下载vue-cli的时候选择自动添加路由

(2) 直接下载： npm install vue-router --save(-S) 在package.json中会查看到

(3)用网上的链接：https://unpkg.com/vue-router/dist/vue-router.js

    然后在Vue后面加载vue-router,他会自动安装：

    <script src="/path/to/vue.js"></script>
    <script src="/path/to/vue-router.js"></script>

简单的路由实现：

1. 引入vue-router,如果是在脚手架中，引入VueRouter之后,需要通过Vue.use来注册插件

 import Vue from 'vue'  
    import Router from 'vue-router'  //导入
    Vue.use(Router)    //注册

2. 创建router路由器

  new Router(options) //options一般都是routes

3. 创建路由表并配置在路由器中 router的index.js进行

 //定义路由
    var routes = [
        {path,component}//path为路径，component为路径对应的路由组件
    ]
    new Router({  // 创建router实例
        routes   //传递配置的参数
    })

4. 在根实例里注入router,目的是为了让所有的组件里都能通过this.$router来使用路由的相关功能api; 在main.js中

 new Vue({
        el: '#app',
        router,   //注入
        template: '<App/>',
        components: { App }
    })

5. 利用router-view来指定路由切换的位置

<div id="app">
      //路由出口,路由配置到的文件在这里渲染
      <router-view></router-view>
  </div>

6. 使用router-link来创建切换的工具，会渲染成a标签，添加to属性来设置要更改的path信息，且会根据当前路由的变化为a标签添加对应的；router-link-active类名

使用router-link组件来导航，通过传入'to'属性指定连接;

<router-link to="main">main</router-link>
<router-link to="news">news</router-link>

style:当前选中的元素
.router-link-active{
    color:red;
}

多级路由

1. 在创建路由表的时候，可以为每一个路由对象创建children属性，值为数组，在这个里面又可以配置一些路由对象来使用多级路由，注意：一级路由path前加'/'

const routes = [
  {path:'/main',component:AppMain},
  {path:'/news',component:AppNews,children:[ //children
    {path:'inside',component:AppNewsInside},
    {path:'outside',component:AppNewsOutside}
  ]},
]

2. 二级路由组件的切换位置依然由router-view来指定（指定在父级路由组件的模板中）

显示

<router-link to='inside'>inside</router-link>
<router-link to='outside'>outside</router-link>

<router-view></router-view>

默认路由和重定向：

1. 当我们进入应用，默认像显示某一个路由组件，或者当我们进入某一级路由组件的时候想默认显示其某一个子路由组件，我们可以配置默认路由：

{path:'',component:'/main'} //当前显示的，不会自动添加类名

2. 当我们需要进入之后进行重定向到其他路由的时候，或者当url与路由表不匹配的时候：

{path:'',redirect:'/main'} //重定向路由有显示当前路 自动添加类名
二级路由：
{path:'/news',component:AppNews,children:[//父级路由不加name
{path:'',redirect:'inside',name:'news'} //重定向路由需要加，不加也可以
]}
///...放在最下面
{path:'**',redirect:'/main'},

命名路由：

我们可以给路由对象配置name属性，这样的话，我们在跳转的时候直接写name:main就会快速的找到此name属性对应的路由，不需要写大量的urlpath路径了

1. 二级路由：

<router-link :to="{name:'inside'}">inside</router-link> //注意加上：号和''号
<router-link to='/news/outside'>outside</router-link> //普通路由

路由表中：
{path:'inside',component:AppNewsInside,name:'inside'},
{path:'outside',component:AppNewsOutside,name:'outside'},

v-bind中才使用{{}}

2. 使用对象的方法 ;具体查看下面动态路由

<router-link v-for="_new in news" :key = "_new.id" :to="{name:'detail',params:{id:_new.id},query:{content:_new.content}}"><li>{{_new.content}}</li></router-link>

{path:'detail/:id',component:AppNewsDetail,name:'detail'}

也可以使用：router.push({ name: 'user', params: { userId }}) // -> /user/123

动态路由：

有时候我们需要在路由跳转的时候跟上参数，路由的参数主要有两种：路径参数和queryString参数

路由参数需要在路由表里设置

{path:'user/:id',component:User]}

上面的代码就是在给User路由配置接收id的参数，多个参数继续在后面设置

在组件中可以通过this.$rout.params来使用

queryString参数不需要在路由表设置接收，直接设置?后面的内容，在路由组件中通过this.$route.query来接收

可以用$watch来查看参数变化

二级路由详情显示：

路径要求：

例如：http://localhost:8080/#/news/detail/1?content=%E5%9B%BD%E5%86%85%E6%96%B0%E9%97%BB1

<div class="app-new-detail">
{{this.$route.params.id}}
</div>
mounted(){//用mounted来挂载数据
    console.log(this)
    console.log(this.$route.params.id)
    console.log(this.$route.query.content)//第二种方法
}
父级路由： ：to是命名路由

<ul>
<router-link v-for="_new in news" :key = "_new.id" :to="'detail/'+_new.id+'?content='+_new.content"><li>{{_new.content}}</li></router-link>
</ul>

在路由表里设置参数：

{path:'detail/:id',component:AppNewsDetail,name:'detail'} //detail路由接收：/id 接收多个的时候:/id/:content

router-link：

1. router-link的to属性，默认写的是path(路由的路径)，可以通过设置一个对象，来匹配更多

name是要跳转的路由的名字，也可以写path来指定路径，但是path的时候就不能使用params

2. <router-link>比起写死的<a href="">好处：

无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。

在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。

当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写（基路径）了。

注意：这里的to用法可以看上面的命名路由和动态路由

router-link的to属性，默认写的是path（路由的路径），可以通过设置一个对象，来匹配更多

:to='{name:"detail",params:{id:_new.id},query:{content:_new.content}}'

name是要跳转的路由的名字，也可以写path来指定路径，但是用path的时候就不能使用params传参，params是传路径参数，query传queryString参数

3. replace属性可以控制router-link的跳转不被记录

<router-link :to="{name:'inside'}" replace>inside</router-link>

routes:

mode:'history'

4. active-class属性可以控制路径切换的时候对应的router-link渲染的dom添加的类名

当点击的时候，链接会默认加上router-link-active 但是我们可以通过active-class来改变默认添加的类名

5. append 设置 append 属性后，则在当前（相对）路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b