VUE-路由

后端路由：对于普通网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
前端路由：对于单页面应用程序来说，主要通过URL中的hash(#)来实现不同页面之间的切换，同时hash有一个特点，HTTP请求中不会包含hash相关的内容，所以单页面程序中的页面跳转主要用hash实现。在单页面应用程序中，这种通过hash改变来切换页面的方式称作前端路由。

基本使用

1． 安装vue-router

npm install vue-router

2． 要在模块工程中使用路由，就必须要通过Vue.use()明确的安装路由功能

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

3． 创建路由对象，并传递一个配置对象用来指示路由匹配规则。每个路由规则都是一个对象，这个规则对象身上有两个必须的属性：path和component
path表示监听哪个路由连接地址
component表示前面匹配到的path对应哪个组件，必须是一个组件的模板对象，不能是组件的引用名称

export default new Router({
  routes: [
    // {
    //   path: '/',
    //   name: 'HelloWorld',
    //   component: HelloWorld
    // },
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/Menu',
      name: 'Menu',
      component: () => System.import("@/components/Menu.vue"),
      children: [
        {
          path:'/',
          component:() => System.import("@/components/UserCenter.vue"),
        },
        {
          path: "/UserCenter",
          name: "个人中心",
          component:() => System.import("@/components/UserCenter.vue")
        },
        {
          path: "/Game",
          component: () => System.import("@/components/Game.vue"),
          name: "休闲时刻"
        },
        {
          path: "/GameList",
          component: () => System.import("@/components/GameList.vue"),
          name: "游戏记录"
        },
        {
          path: "/Routeline",
          component: () => System.import("@/components/Routeline.vue"),
          name: "路线规划"
        },
 
        {
          path: "/Weather",
          component: () => System.import("@/components/Weather.vue"),
          name: "天气查询"
        }
      ]
    }
  ],
  mode:'history'
})

4． 将router添加到vue实例中去

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

5． 将设置好的路由显示在页面上，router-view是vue-router提供的元素，专门用来当做占位符的，将来根据路由规则匹配到的组件就会展示到router-view中去。
<router-view></ router-view >
命名视图
router有一个name属性，这个属性可以指定当前的router-view标签里边放置的是哪个组件，在路由配置时，components书写规范为（记得加s）：
components:{
‘default’:header,
‘left’:Left,
‘main’:Main
}
这样在使用的时候，如果不给router-view添加name属性，就直接显示header组件，如果添加了name属性，就显示指定的组件。

router-link

<router-link to=’/login’ tag=’span’>登录</router-link>

router-link默认渲染为一个a标签

to属性书写路由地址

tag属性表示想要渲染成一个什么标签

编程式导航

首先区分下this.router

this.$route是路由参数对象，所有路由中的参数params,query都属于它

this.$router是一个路由导航对象，用它可以方便的使用js代码，实现路由的前进、后退，跳转到新的URL地址

四种路由跳转的方式

//  1 最简单的编程式导航
          this.$router.push('/home/goodlist/'+id);
        //  2 在路由中拼接参数传递参数
          this.$router.push({path:'/home/goodlist/'+id});
        //  3 通过name属性进行路由跳转
          this.$router.push({name:'货物详情',params:{id:id}});
        // 注意：如果使用了path，那么params会被忽略，也就是说在使用oath进行路由跳转时不能用params进行传参

        // 所以就有了第四种路由跳转的方式，不过这种方式进行跳转后参数是以？跟随在路由后面的
        //  4 这个例子的路由是/home/goodlist/?id=22
          this.$router.push({path:'/home/goodlist/',query:{id:id}});

redirect

重定向根目录的组件，使项目每次打开时显示的默认页为redirect指向的页面。

   {
      path:'/',
      redirect:Login
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },

路由传参

方式一：

<router-link to=’/login?id=10&name=hehe’>登录</router-link>

拿参数的时候，只要在登录组件里边用：this.route,query.name

方式二：

       {
          path: "/UserCenter/:id/:name",
          name: "个人中心",
          component:() => System.import("@/components/UserCenter.vue")
        },

使用的时候 this.route.parms.name

路由嵌套

    {
      path: '/Menu',
      name: 'Menu',
      component: () => System.import("@/components/Menu.vue"),
      children: [
        {
          path:'/',      这个地方表示默认的子页面是哪个
          component:() => System.import("@/components/UserCenter.vue"),
        },
        {
          path: "/UserCenter",
          name: "个人中心",
          component:() => System.import("@/components/UserCenter.vue")
        },
        {
          path: "/Game",
          component: () => System.import("@/components/Game.vue"),
          name: "休闲时刻"
        },
        {
          path: "/GameList",
          component: () => System.import("@/components/GameList.vue"),
          name: "游戏记录"
        },
        {
          path: "/Routeline",
          component: () => System.import("@/components/Routeline.vue"),
          name: "路线规划"
        },
 
        {
          path: "/Weather",
          component: () => System.import("@/components/Weather.vue"),
          name: "天气查询"
        }
      ]
    }