命名路由
有时候通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建Router实例的时候，在routes配置中给某个路由设置名称。
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
就是添加一个name属性值，用来表示path路径，主要是使用方便。
命名视图
有时候想同时(同级)展示多个视图，而不是嵌套展示，例如创建一个布局，有sidebar(侧导航)和main(主内容)两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果router-view没有设置名字，那么默认为default。
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用components配置(带上s)：
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
嵌套命名视图
我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套router-view组件。
<div>
<h1>User Settings</h1>
<NavBar/>
<router-view/>
<router-view name="helper"/>
</div>
然后你可以用这个路由配置完成该布局：
{
path: '/settings',
// 你也可以在顶级路由就配置命名视图
component: UserSettings,
children: [{
path: 'emails',
component: UserEmailsSubscriptions
}, {
path: 'profile',
components: {
default: UserProfile,
helper: UserProfilePreview
}
}]
}
重定向和别名
重定向
重定向也是通过routes配置来完成，下面的例子是从/a重定向到/b：
const router = new VueRouter({
routes: [
{path: '/a', redirect: '/b'}
]
})
重定向的目标也可以是一个命名的路由：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
甚至是一个方法，动态返回重定向目标：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
重定向的意思是当用户访问/a时，URL将会被替换/b，然后匹配路由为/b。
别名
/a的别名是/b，意味着，当用户访问/b时，URL会保持为/b，但是路由匹配则为/a，就像用户访问/a一样。意思是虽然访问的是/b，URL也是/b，但是显示的却是匹配/a路由的组件。例如：
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。
路由组件传参
在组件中使用route的耦合
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
路由组件传参
在组件中使用route的耦合
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
通过props解耦
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
这样子你便可以在任何地方使用该组件，使得该组件更易于重用和测试。
布尔模式
如果props被设置为true，route.params将会被设置为组件属性。
对象模式
如果props是一个对象，它会被按原样设置为组件属性。当props是静态的时候有用。
const router = new VueRouter({
routes: [
{ path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
]
})
函数模式
你可以创建一个函数返回props。这样你便可以将参数转换成另一种类型，将静态值与路由的值结合等等。
const router = new VueRouter({
routes: [
{ path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
]
})
URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件。
请尽可能保持 props 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 props，请使用包装组件，这样 Vue 才可以对状态变化做出反应。
HTML5 History模式
vue-router默认hash模式---使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。
如果不想要很丑的hash，我们可以用路由的history模式，这种模式充分利用history.pushState API来完成URL跳转而无须重新加载页面。
const router = new VueRouter({
mode: 'history',
routes: [...]
})
当你使用history模式时，URL就像正常的URL，例如：http://yoursite.com/user/id，也好看！不过这种模式要玩好，还需要后台配置支持。
渐进式框架的大概意思就是你可以只用我的一部分，而不是用了我这一点就必须用我的所有部分。比如用vue框架，不需要一定使用vue的插件也可以使用axios插件。
vue-router的hash模式与history模式
hash模式
hash属性是一个可读可写的字符串，该字符串是URL的锚部分(从#号开始的部分)。例如：http://www.runoob.com/jsref/prop-loc-hash.html#/aaafafsadfd的hash属性是#/aaafafsadfd。hash属性的修改不会导致浏览器刷新，所以vue-router就是利用这一点来实现前端路由。
当直接访问 http://example.com/#/foobar 的时候，实际上向服务器发起的请求是 http://example.com/ ,因此会首先加载页面及脚本文件，接下来脚本执行路由跳转,一切正常。
history模式
history对象包含用户(在浏览器窗口中)访问过的URL。
history对象是window对象的一部分，可通过window.history属性对其进行访问。
因此，hash模式和history模式都属于浏览器自身的属性，vue-router只是利用了这两个特性来实现路由。
提供两种模式的原因：
vue是渐进式前端开发框架，为了实现SPA，需要引入前端路由系统。前端路由的核心是：改变视图的同时不会向后端发送请求(改变视图的同时不会刷新页面/页面重载)。
因为vue是组件式开发，视图的改变不是因为跳转到另一个url，而是url没有变化，只是#后面的路由发生变化，也就是发生了组件的创建与销毁。
为了达到这一目的，浏览器提供了hash和history模式。
1.hash：hash虽然出现在URL中，但不会被包含在http请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
2.history对象有三个方法：back()、forward()、go()，新增了pushState()、replaceState()对历史记录修改的功能。只是当它们执行修改时，虽然改变了当前的URL，但浏览器不会立即向后端发送请求。
这两种模式都可以用作前端路由，但是我们一般用hash模式。
参考文章：
https://blog.csdn.net/majunjie2017/article/details/78507551
网友评论