导航

作用：前端路由

核心：锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据

原理：

window.addEventListener('hashchange',fn);
根据你放<router-view></router-view><div id="xxx"></div> 作为一个DOM上的标识
最终当锚点值改变触发hashchange的回调函数，我们将指定的模板数据插入到DOM标识上

<div class="h">我是头部</div>
<div id="content" class="b"></div>
<div class="f">我是底部</div>
<script type="text/javascript">
//监视锚点值的改变
window.addEventListener('hashchange', function() {
    var text = '';
    switch (location.hash) {
        case '#/music':
            text = '各种音乐的数据';
            break;
        case '#/movie':
            text = '各种电影的数据';
            break;
    }
    document.getElementById('content').innerHTML = text;
})
</script>

经验：以后看到vue开头的插件，就知道必须Vue.use

Vue的核心插件:

vue-router 路由
vuex 管理全局共享数据

使用方式：

下载 npm i vue-router -S
封装路由

import Vue from 'vue';
//配置路由
import VueRouter from 'vue-router';
Vue.use(VueRouter);

//1.创建组件
import Home from '../components/Home.vue';
import News from '../components/News.vue';

//2.配置路由   注意：名字
const routes = [
    { path: '/home', component: Home },
    { path: '/news', component: News, name: 'news' },
    { path: '*', redirect: '/home' }   /*默认跳转路由*/
]

//3.实例化VueRouter  注意：名字
const router = new VueRouter({
    mode: 'hash',   /*hash模式改为history*/
    routes // （缩写）相当于 routes: routes
})

//5 <router-view></router-view> 放在 App.vue
export default router;

在main.js引入router.js

import router from './router/router.js';
new Vue({
	el: '#app',
  router,
  render: h => h(app);
});

在app.vue中留坑 <router-view></router-view>

⭐️ router-link

<router-link> 默认渲染为一个a标签
<router-view> 专门用来当做占位符，将来路由规则匹配到的组件，会展示到router-view中去

基本使用

let router = new VueRouter({
    routes: [
        { name: 'home', path: '/home', component: Home },
        { name: 'music', path: '/music', component: Music },
        { path: '*', redirect: '/home' }
    ]
});

//1. 推荐写法，:to带name
// 更利于维护，如果只修改了路由配置中的path，该a标签会根据修改后的值生成href属性
<router-link :to="{name: 'home'}">首页</router-link>
<router-link :to="{name: 'music'}">音乐</router-link>
<router-view></router-view>

//2. 不推荐，直接写路径，不带冒号的to
<router-link to="/music">音乐</router-link>

⭐️ 传递参数

在vue-router中，有两大对象被挂载到了实例 this

route（只读、具备信息的对象）
router（具备功能函数）

查询字符串：

去哪里（列表页传参） <router-link :to="{name:'detail',query:{id:1} } ">xxx</router-link>
导航（router中） { name:'detail' , path:'/detail', component: Detail }
去了干嘛（详情页接收参数）
- this.$route.query.id

path方式：

去哪里 <router-link :to="{name:'detail',params:{name:1} } ">xxx</router-link>
导航(path方式需要在路由规则上加上/:xxx)
- { name:'detail' , path:'/detail/:name', component: Detail}
去了干嘛（获取路由参数）
- this.$route.params.name

编程导航

作用：

不能保证用户一定会点击某些按钮
希望在路由跳转之前，还可以做一些别的附加操作

使用：

this.$router.go 根据浏览器记录前进1 后退-1
this.$router.replace(location) 它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
this.$router.push(直接跳转到某个页面显示)
- push参数: 字符串 /xxx
- 对象 : {name:'xxx',query:{id:1},params:{name:2} }

goMoive() {
   this.$router.push({
   		name: 'movie',
     	query: {id: 1, name: '古典'}
   })
}
goNews() { this.$router.push({ path: '/content/495' }); }

路由高亮

组件内重写默认提供的类属性

.router-link-active {
	color: red;
  ...
}

VueRouter中全局配置

var router = new VueRouter({
  routes: [...],
  linkActiveClass: 'myactive'
});

重定向和404

打开页面后，默认就是/
重定向 { path:'/', redirect:'/home' }
重定向 { path:'/', redirect:{name:'home'} }
404 : 在路由规则的最后的一个规则
- 写一个很强大的匹配
- { path:'*', component:notFoundVue}

多视图/命名视图

main.js

//路由切换页面
import header from './components/header.vue'
import footer from './components/footer.vue'

//创建路由对象并配置路由规则
let router = new VueRouter({
    routes: [{
            path: '/',
            components: {
                header: header,
                default: header,
                footer: footer
            }
        }]
});

App.vue

// 一个组件中，放多个 router-view
<template>
    <div>
        <div>我是头部啊</div>
        <hr/>
            <!-- 留坑，非常重要 坑名-->
            <router-view class="b" name="header"></router-view>
            <router-view class="b" ></router-view>
            <router-view class="b" name="footer"></router-view>
        <hr/>
        <div>我是底部啊</div>
    </div>
</template>

⭐️ 嵌套路由

注意：

children后面跟的是数组 []
子路由的path前面不要带 / ，带了就相当于是绝对路径了

// main.js
let router = new VueRouter({
    routes: [
        { name: 'home', path: '/home', component: Home },
        { name: 'music', path: '/music', component: Music, // <====== 第一层路由
            children: [ // <====== 第二层路由
                { name: 'oumei', path: 'oumei', component: Oumei },
                { name: 'guochan', path: 'guochan', component: Guochan }
            ]
        },
        { path: '*', redirect: '/home' }
    ]
});

// App.vue
<div>
    <sw-header></sw-header>
    <router-view></router-view>
    <sw-footer></sw-footer>
</div>

// Music.vue
<div>
    <h3>我是音乐页</h3>
    <router-link :to="{ name: 'oumei' }">欧美</router-link>
    <router-link :to="{ name: 'guochan' }">国产</router-link>
    <router-view></router-view>
</div>

// 一级页面
const Foo = {
	template: `
		<div>
			<h2>Foo</h2>
			<router-link to="/foo/bar">Go to Bar</router-link>
			<router-view></router-view>
		</div>
	`
}
// 二级页面
const Bar = {
	template: `
		<div>Bar</div>
	`
}

// 顶层出口
<template>
	<div id="app">
    <router-link to="/foo">Go to Foo</router-link>
		<router-view></router-view>
  </div>
</template>

const routes = [
  {
  	path: '/foo',
    component: Foo,
    children: [
      {
        // 当 /foo/bar 匹配成功
        // Bar 会被渲染在 Foo 组件的 <router-view> 中
      	path: 'bar',
        component: Bar
      }
    ]
  }
]