Vue--路由问题

对于路由的理解使用存在一些问题，根据从网上查找的解释，与自己遇到的问题，对路由进行一些说明。

路由的定义

路由中有三个基本的概念 route, routes, router。

　1， route，它是一个路由，由这个英文单词也可以看出来，它是单数，用于指向链接的内容。

　2， routes 是一组路由，把上面的多个路由组合起来，形成一个数组。也即多个链接与多个路径的配对。
　
　3， router 是一个机制，相当于管理者，用于管理路由。因为routes 只是定义了一组路由，它是静止的，当需要将链接地址与内容连接起来的时候，是一个动态处理的过程，router就是用于处理这个请求过程的。router到routes 中去查找链接地址对应的连接内容。

　4，客户端中的路由，实际上就是dom 元素的显示和隐藏。举例，当页面中显示链接1 内容的时候，链接2 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.

vue中路由的配置与使用

引入路由:

import VueRouter from 'vue-router'

路由实例化：

Vue.use(VueRouter)

定义路由中的内容：

let router = new VueRouter({
    mode: 'history',
    routes: [//这里定义路由指向的页面
        {
            path: '/',//默认时指向的页面 根目录
            component: IndexPage
        },
        {
            path: '/detail/analysis',
            component: DetailPage
        },
        {   
            //假设'/detail'与'/detail/analysis'请求的内容相同时,
            //不能直接写成以下方式，必须写成重定向方式
            //重定向的内容是该组件的真正请求路径
            /**
                   {
                        path: '/detail',
                        component: DetailPage
                    }
            */
            path: '/detail',
            component: DetailPage,
            redirect: '/detail/analysis',
            //嵌套子路由
            children: [
                {
                    path: 'analysis',
                    component: DetailAnaPage
                },
                {
                    path: 'count',
                    component: DetailCouPage
                },
            ]
        }
    ]
})

将路由注入Vue对象：

new Vue({
  el: '#app',
  router,
})

<router-link> 标签的使用

router-link类似于a标签，用于定义路由的连接路径

1.”:to” 属 性
相当于a标签中的”herf”属性，后面跟跳转链接所用

<router-link :to="/home">Home</router-link>
<!-- 渲染结果 -->
<a href="/home">Home</a>

2.”replace” 属 性
replace在routre-link标签中添加后，页面切换时不会留下历史记录

<router-link :to="/home" replace></router-link>

3.”tag” 属 性
具有tag属性的router-link会被渲染成相应的标签

<router-link :to="/home" tag="li">Home</router-link>
<!-- 渲染结果 -->
<li>Home</li>

此时页面的li同样会起到a链接跳转的结果，vue会自动为其绑定点击事件，并跳转页面，或者渲染指定内容

4.”active-class” 属 性
这个属性是设置激活链接时class属性，也就是当前页面所有与当前地址所匹配的的链接都会被添加class属性

<router-link :to="/home" active-class="u-link--Active">Home</router-link>

active-class属性的默认值是router-link-active,所以如果没有设置，就会被渲染为这个class

可以在router.js里面设置

const router = new VueRouter({
  mode: 'hash',
  linkActiveClass: 'u-link--Active', // 这是链接激活时的class
})

5.”exact” 属 性
开启router-link的严格模式

<router-link :to="/" exact>home</router-link>

上面这个标签如果不加exact属性，则会寻找相对路径下的该路径，
这却不是我们的本意,在加了这个属性后就会寻找绝对路径内容

<router-view> 标签的使用

router-view主要是用来渲染router-link指向的内容。
通常页面中是多个router-link，一个router-view，这种情况连接的指向内容都是在router-view位置显示；

当页面存在多个router-view，如何确定router-link指向的内容在哪个router-view处显示,示例说明：

当一个指定路径页面，需要多个组件渲染时：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Home,//指向没有命名的router-view
        locationa: Data, //指向指定命名的router-view
        locationb: Content
      }
    }
  ]
})

嵌套路由，当一个指定页面中，有多个子链接时：

let router = new VueRouter({
    mode: 'history',
    routes: [//这里定义路由指向的页面
        {
            path: '/',//默认时指向的页面 根目录
            component: IndexPage
        },
        {   
            path: '/detail',
            component: DetailPage,
            redirect: '/detail/analysis',
            //嵌套子路由
            children: [
                {
                    path: 'analysis',
                    component: DetailAnaPage
                },
                {
                    path: 'count',
                    component: DetailCouPage
                },
                {
                    path: 'forecast',
                    component: DetailForPage
                }
            ]
        }
    ]
})

当一个detail页面有多个子链接，并且有多个渲染位置时：

<router-link :to="/analysis">analysis</router-link>
<router-link :to="/count">count</router-link>
<router-link :to="/forecast">forecast</router-link>


 <router-view class="view"></router-view>
 <router-view class="view" name="locationa"></router-view>
 <router-view class="view" name="locationb"></router-view>
 <router-view class="view" name="linlcontent"></router-view>
routes: [
    //该页面多个路由视图被同时渲染
    { path: '/detail',
      components: {
        default: Top,
        locationa: Left,
        locationb: Contenttop
      }
    },
    //指定位置显示多个链接被激活时的内容
     {
      path: '/analysis',
      components: {
        linlcontent: DetailAnaPage
      }
    }   ,
     {
      path: '/count',
      components: {
        linlcontent: DetailCouPage
      }
    },{
      path: '/forecast',
      components: {
        linlcontent: DetailForPage
      }
    }
  ]

命名路由：

routes: [
{
        path: "/user/:userId",
        name: "user",
        component: user
}
]
<router-link :to="/user/joker">Userjoker</router-link> // 和下面等价 
<router-link :to="{name: 'user', params: { userId: 'joker' }}">User</router-link>   // 当使用对象作为路由的时候，to前面要加一个冒号,表示绑定