后端路由：对于普通网站，所有的超链接都是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: "天气查询"
}
]
}
