认识前端路由

路由其实是网络工程中的一个术语，在架构一个网络时，非常重要的两个设别是路由器和交换机。当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器,事实上，路由器主要维护的是一个映射表，映射表会决定数据的流向。
路由的概念在软件工程中出现，最早是在后端路由中实现的，原因是web的发展主要经历了这样一些阶段：后端路由阶段，前后端分离阶段，单页面复应用(SPA)阶段。

后端路由阶段

早期开发的网站，整个html是由服务器来进行渲染的，服务器直接生产渲染好对应的html页面，然后当浏览器发起请求时，后台会根据url路径来渲染页面返回给前端，前端拿到后台返回的页面数据然后进行展示。这就是后端路由。

优点：

  • 不需要单独加载js和css文件，有利于seo优化。

缺点是：

  • 整个前端页面需要后台开发人员来维护。
  • 如果前端开发人员想要开发页面，需要通过java,php来开发。
  • html代码和数据对应的逻辑混合在一起，编写和维护都非常糟糕。

前后端分离阶段

前后端分离阶段，就是前端一些文件放到静态资源服务器中(html + css + js)，此时后台服务器只需要提供一些api接口，前端需要请求静态资源，并且需要请求api接口，并且将接口数据渲染到静态资源文件中，然后渲染到前端。此时的好处就是前端和后端任务清晰，并且随着移动端的流行，一套后端的 api接口可以实现复用。但是目前这种模式也是不常用的(jquery开发模式)。

单页面复应用

单页面复应用是现在主要的开发模式，就是在一个页面渲染，当在不同的页面切换时，不会刷新页面。现在三大框架，都采用单页面复应用进行开发。

认识vue-router

目前前端流行的三大框架，都有自己的路由实现：

  • Angular的ngRouter
  • React的ReactRouter
  • vue中的vue-router

vue Router是vuejs的官方路由，他与vuejs核心深度集成，让用vuejs构建单页面应用变得更加容易。
vue-router是基于路由和组件的，路由用于设定访问路径，将路径和组件映射起来，在vue-router的单页面应用中，页面的路径的改变就是组件的切换。

vue-router基本使用

基本路由

  1. 安装vue-router，命令npm i vue-router@3(默认不带版本安装的是最新版本4.x，因为我这里vue是2.x版本，使用4.x版本的vue-router会有问题，所以这里使用vue-router@3)

  2. 应用插件Vue.use(VueRouter)

  3. 配置router对象

    src/router/index.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // 引入vue及vue-router
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    // 引入路由组件
    import About from '../components/About';
    import Home from '../components/Home';

    Vue.use(VueRouter);

    // 创建router的实例对象，配置一组组路由规则以及匹配的组件
    export const router = new VueRouter({
        routes: [
            { path: '/About', component: About },
            { path: '/Home', component: Home },
        ]
    });

    // 暴露router
    export default router

  4. 实现切换：<router-link active-class="active" to="/about">关于</router-link>,router-link标签用于配置路由的切换，最终会被浏览器替换为a标签，active-class属性用于当路由激活时使用的css样式，to属性用于路由的目标路径。

  5. 指定展示位<router-view></router-view>

src/router/index.js该文件专门用于创建整个应用的路由器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 引入vue及vue-router
import Vue from 'vue';
import VueRouter from 'vue-router';
// 引入路由组件
import About from '../components/About';
import Home from '../components/Home';

Vue.use(VueRouter);

// 创建router的实例对象，配置一组组路由规则以及匹配的组件
export const router = new VueRouter({
    routes: [
        { path: '/About', component: About },
        { path: '/Home', component: Home },
    ]
});

// 暴露router
export default router

src/main.js在vue中引入vue-router

1
2
3
4
5
6
7
8
9
10
import Vue from 'vue'
import App from './App.vue'
import router from './router';  // 引入vue-router

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router: router,         // 应用router
}).$mount('#app')

src/App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<template>
  <div id="app">
    <div>
      <div class="row">
        <div class="col-xs-offset-2 col-xs-8">
          <div class="page-header">
            <h2>Vue Router Demo</h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-2 col-xs-offset-2">
          <div class="list-group">
            <!-- 原始html中我们使用a标签实现页面的跳转 -->
            <!-- <a class="list-group-item active" href="./about.html">About</a> -->
            <!-- <a class="list-group-item" href="./home.html">Home</a> -->

            <!-- Vue中借助router-link标签来实现路由的切换 -->
            <router-link class="list-group-item" active-class="active" to="/about">关于</router-link>
            <router-link class="list-group-item" active-class="active" to="/home">首页</router-link>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="panel">
            <div class="panel-body">
              <!-- 指定路由后的组件显示位置 -->
              <router-view></router-view>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'App',
    components: {},
  }
</script>

src/components/Home.vue

1
2
3
4
5
6
7
8
9
10
11
<template>
    <div>
        <h2>我是Home的内容</h2>
    </div>
</template>

<script>
    export default {
        name: 'Home',
    };
</script>

src/components/About.vue

1
2
3
4
5
6
7
8
9
10
11
<template>
    <div>
        <h2>我是About的内容</h2>
    </div>
</template>

<script>
    export default {
        name: 'About',
    };
</script>

demo展示

几个注意的事项

  • 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹 比如前面的案例就可以修改为 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ── src
        ├── App.vue
        ├── assets
        │   └── logo.png
        ├── components				# 一般组件存放目录
        │   └── Banner.vue
        ├── main.js
        ├── pages							# 路由组件存放目录
        │   ├── About.vue
        │   └── Home.vue
        └── router						# 路由器配置对象存目录
            └── index.js

  • 通过切换路由，“隐藏”了的路由组件默认是被销毁掉的，需要的时候再去挂载。

  • 每个组件都有自己的$route属性，里面存储着自己的路由信息

  • 整个应用只有一个router，可以通过组件的$router属性获取到

命名路由

作用：可以简化路由的跳转

1、在路由配置对象中给子路由配置name来命名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
          name:'hello' // 给子路由配置一个name属性来命名。
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}

跳转路由简化引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<!--使用命名路由后这里将path属性改为name属性 -->
<router-link 
	:to="{
		name:'hello',		
		query:{
		    id:666,
        title:'你好'
		}
	}">
  跳转
</router-link>

嵌套(多级)路由

1、配置子路由规则，使用children配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 引入vue及vue-router
import Vue from 'vue';
import VueRouter from 'vue-router';
// 引入路由组件
import About from '../pages/About';
import Home from '../pages/Home';
import Message from '../pages/Message';
import News from '../pages/News';

Vue.use(VueRouter);

// 创建router的实例对象，配置一组组路由规则以及匹配的组件
export const router = new VueRouter({
    routes: [
        { path: '/About', component: About },
        {
            path: '/Home',
            component: Home,
            children: [                         // 通过children来配置子路由
                {
                    path: 'news',               // 子路由的路径，注意子路由一定不能带/，比如/news这样的就是错误的。
                    component: News,            // 子路由匹配的组件名称
                },
                {
                    path: 'message',            // 子路由的路径，注意子路由一定不能带/，比如/message这样的就是错误的。
                    component: Message,         // 子路由匹配的组件名称
                },
            ]
        },
    ]
});

// 暴露router
export default router

2、配置路由的跳转切换(这里一定要带上父路由，以/开始)

1
2
<router-link active-class="active" to="/home/news">News</router-link>
<router-link active-class="active" to="/home/Message">Message</router-link>

3、指定展示位<router-view></router-view>

src/pages/Home.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
    <div>
        <div>
            <h2>Home组件内容</h2>
            <div>
                <ul class="nav nav-tabs">
                    <li>
                        <router-link class="list-group-item" active-class="active" to="/home/news">News
                        </router-link>
                    </li>
                    <li>
                        <router-link class="list-group-item" active-class="active" to="/home/Message">Message
                        </router-link>
                    </li>
                </ul>
                <div>
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        components: {},
        name: 'Home',
    };
</script>

src/pages/News.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
    <div>
        <ul>
            <li>news001</li>
            <li>news002</li>
            <li>news003</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'News',
    };
</script>

src/pages/Message.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
    <div>
        <ul>
            <li>
                <a href="/message1">message001</a>&nbsp;&nbsp;
            </li>
            <li>
                <a href="/message2">message002</a>&nbsp;&nbsp;
            </li>
            <li>
                <a href="/message/3">message003</a>&nbsp;&nbsp;
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'Message',
    };
</script>

路由传递参数

传递query参数

1、传递参数

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法（推荐） -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id: m.id,
       title: m.title
		}
	}"
>跳转</router-link>

2、接收参数

1
2
$route.query.id
$route.query.title

示例

src/router/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 引入vue及vue-router
import Vue from 'vue';
import VueRouter from 'vue-router';
// 引入路由组件
import About from '../pages/About';
import Home from '../pages/Home';
import Message from '../pages/Message';
import News from '../pages/News';
import Detail from '../pages/Detail';

Vue.use(VueRouter);

// 创建router的实例对象，配置一组组路由规则以及匹配的组件
export const router = new VueRouter({
    routes: [
        { path: '/About', component: About },
        {
            path: '/Home',
            component: Home,
            children: [                         // 通过children来配置子路由
                {
                    path: 'news',               // 子路由的路径，注意子路由一定不能带/，比如/news这样的就是错误的。
                    component: News,            // 子路由匹配的组件名称
                },
                {
                    path: 'message',            // 子路由的路径，注意子路由一定不能带/，比如/message这样的就是错误的。
                    component: Message,         // 子路由匹配的组件名称
                    children: [ 
                        {path:'detail',component:Detail}
                    ]
                },
            ]
        },
    ]
});

// 暴露router
export default router

src/pages/Message.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<template>
    <div>
        <ul>
            <li v-for="m in msgList" :key="m.id">
                <!-- 跳转路由并携带query参数，to的字符串写法，不太推荐此写法，有点混乱 -->
                <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>-->

                <!-- 跳转路由并携带query参数，to的d对象写法，推荐 -->
                <router-link :to="{
                    path: '/home/message/detail',
                    query:{
                        id: m.id,
                        title: m.title
                    }
                }">
                    {{m.title}}
                </router-link>
            </li>
            <hr>
            <router-view></router-view>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'Message',
        data() {
            return {
                msgList: [{
                        id: '001',
                        title: '消息001'
                    },
                    {
                        id: '002',
                        title: '消息002'
                    },
                    {
                        id: '003',
                        title: '消息003'
                    },
                ],
            };
        },
    };
</script>

src/pages/Detail.vue

1
2
3
4
5
6
7
8
9
10
11
12
<template>
    <ul>
        <li>消息ID：{{$route.query.id}}</li>
        <li>消息标题：{{$route.query.title}}</li>
    </ul>
</template>

<script>
    export default {
        name: 'Detail',
    };
</script>

结果示例

传递params参数

1、配置src/router/index.js对应的路由，，需要声明接收params参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', // 🔴使用占位符声明接收params参数
					component:Detail
				}
			]
		}
	]
}

2、传递参数

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
       title:'你好'
		}
	}">
  跳转
</router-link>

3、接收参数

1
2
$route.params.id
$route.params.title

传递props参数

props作用：让路由组件更方便的收到参数

1、配置src/router/index.js对应的路由，添加对应的props属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
	name:'xiangqing',
	path:'detail/:id/:title',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件,使用的极少，因为传递的始终是死数据
	// props:{id:900,title:'测试'}

	//第二种写法：props值为布尔值，为true时，则把路由收到的所有params参数通过props传给Detail组件，需结合path设置站位属性
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props($route){
		return {
			id: $route.query.id,
			title: $route.query.title
		}
	}
}

2、组件配置接收props，并直接使用

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
    <ul>
        <li>消息编号：{{ id }}</li>
        <li>消息标题：{{ title }}</li>
    </ul>
</template>

<script>
    export default {
        name:'Detail',
        props:['id','title']
    }
</script>

路由replace属性

  • 作用：控制路由跳转时操作浏览器历史记录的模式(前进或后退)
  • 浏览器的历史记录有两种写入方式：push和replace
    • push是追加历史记录（历史所有路由都可以任意前进或者后退）
    • replace是替换当前记录，路由跳转时候默认为push方式
  • 开启replace模式
    • <router-link :replace="true" ...>News</router-link>
    • 简写<router-link replace ...>News</router-link>

总结：浏览记录本质是一个栈，默认push，点开新页面就会在栈顶追加一个地址，后退，栈顶指针向下移动，改为replace就是不追加，而将栈顶地址替换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <div>
    <h2>Home组件内容</h2>
    <div>
      <ul class="nav nav-tabs">
        <li>
          <router-link replace class="list-group-item" active-class="active" 
                       to="/home/news">News</router-link>
    		</li>
        <li>
          <router-link replace class="list-group-item" active-class="active" 
                       to="/home/message">Message</router-link>
    		</li>
    </ul>
    <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    name:'Home'
  }
</script>

编程式路由导航（不用）

作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活

  • this.$router.push({}) 内传的对象与<router-link>中的to相同
  • this.$router.replace({})
  • this.$router.forward() 前进
  • this.$router.back() 后退
  • this.$router.go(n) 可前进也可后退，n为正数前进n，为负数后退
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
this.$router.push({
	name:'xiangqing',
  params:{
    id:xxx,
    title:xxx
  }
})

this.$router.replace({
	name:'xiangqing',
  params:{
    id:xxx,
    title:xxx
  }
})

缓存路由组件

作用：让不展示的路由组件保持挂载，不被销毁

缓存标签中的一个组件：<keep-alive include="News"><router-view></router-view></keep-alive>
缓存标签中的多个组件：<keep-alive :include="['News', 'Message']"><router-view></router-view></keep-alive>

缓存标签中的所有组件：<keep-alive><router-view></router-view></keep-alive>

1
2
3
4
5
6
7
8
9
// 缓存一个路由组件
<keep-alive include="News"> // include中写想要缓存的组件名，不写表示缓存全部组件
    <router-view></router-view>
</keep-alive>

// 缓存多个路由组件
<keep-alive :include="['News','Message']"> 
    <router-view></router-view>
</keep-alive>

路由守卫

activated&deactivated

activated和deactivated是路由组件所独有的两个钩子，用于捕获路由组件的激活状态

具体使用

  • activated路由组件被激活时触发
  • deactivated路由组件失活时触发

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
    <ul>
        <li :style="{opacity}">欢迎学习vue</li>
        <li>news001 <input type="text"></li>
        <li>news002 <input type="text"></li>
        <li>news003 <input type="text"></li>
    </ul>
</template>

<script>
    export default {
        name:'News',
        data(){
            return{
                opacity:1
            }
        },
        activated(){
            console.log('News组件被激活了')
            this.timer = setInterval(() => {
                this.opacity -= 0.01
                if(this.opacity <= 0) this.opacity = 1
            },16)
        },
        deactivated(){
            console.log('News组件失活了')
            clearInterval(this.timer)
        }
    }
</script>

全局路由守卫

src/router/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'


//创建一个路由器
const router = new VueRouter({
    routes:[
        {
            name:'guanyv',
            path:'/about',
            component:About,
            meta:{title:'关于'}
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{title:'主页'},
            children:[
                {
                    name:'xinwen',
                    path:'news',
                    component:News,
                    meta:{isAuth:true,title:'新闻'}
                },
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    meta:{isAuth:true,title:'消息'},
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,
                            meta:{isAuth:true,title:'详情'},
                            props($route){
                                return {
                                    id:$route.query.id,
                                    title:$route.query.title,
                                }
														}
                        }
                    ]
                }
            ]
        }
    ]
})

// 🔴全局前置路由守卫————初始化的时候、每次路由切换之前被调用
router.beforeEach((to,from,next) => {
    console.log('前置路由守卫',to,from)
    if(to.meta.isAuth){
        if(localStorage.getItem('school')==='atguigu'){
            next()
        }else{
            alert('学校名不对，无权限查看！')
        }
    }else{
        next()
    }
})

// 🔴全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
	console.log('后置路由守卫',to,from)
	document.title = to.meta.title || '硅谷系统'
})

// 导出路由器
export default router

独享路由守卫

src/router/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'


//创建一个路由器
const router = new VueRouter({
    routes:[
        {
            name:'guanyv',
            path:'/about',
            component:About,
            meta:{title:'关于'}
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{title:'主页'},
            children:[
                {
                    name:'xinwen',
                    path:'news',
                    component:News,
                    meta:{title:'新闻'},
                    // 🔴独享守卫，特定路由切换之后被调用
                    beforeEnter(to,from,next){
                        console.log('独享路由守卫',to,from)
                        if(localStorage.getItem('school') === 'atguigu'){
                            next()
                        }else{
                            alert('暂无权限查看')
                        }
                    }
                },
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    meta:{title:'消息'},
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,
                            meta:{title:'详情'},
                            props($route){
                                return {
                                    id:$route.query.id,
                                    title:$route.query.title,
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
	console.log('后置路由守卫',to,from)
	document.title = to.meta.title || '硅谷系统'
})

//导出路由器
export default router

组件内路由守卫

src/router/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
    <h2>我是About组件的内容</h2>
</template>

<script>
    export default {
        name:'About',
        // 通过路由规则，离开该组件时被调用
        beforeRouteEnter (to, from, next) {
            console.log('About--beforeRouteEnter',to,from)
            if(localStorage.getItem('school')==='atguigu'){
                next()
            }else{
                alert('学校名不对，无权限查看！')
            }
        },
        // 通过路由规则，离开该组件时被调用
        beforeRouteLeave (to, from, next) {
            console.log('About--beforeRouteLeave',to,from)
            next()
        }
    }
</script>

路由器的两种工作模式

  • 1 对于一个url来说，什么是hash值？
    • #及其后面的内容就是hash值
  • hash值不会包含在HTTP请求中，即：hash值不会带给服务器
  • hash模式
    • 地址中永远带着#号，不美观
    • 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
    • 兼容性较好
  • history模式
    • 地址干净，美观
    • 兼容性和hash模式相比略差
    • 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题
1
2
3
4
5
6
const router =  new VueRouter({
	mode:'history',
	routes:[...]
})

export default router