框架小白白白白的进阶之路 --- （六）插槽与路由
插槽（slot）
匿名slot
当子组件模板中只有一个没有属性的slot时，父组件整个的内容都将插入到slot所在的位置，直接替换掉slot标签。需要注意的是，匿名slot最多只能有一个，多个匿名slot会导致程序报错。
我们也可以在slot标签中添加任何内容作为默认值，如果父组件中是有需要插入的内容时，这些默认值会被替换掉，只有当父组件里面没有内容时，才会显示这些默认值。
<div id="box">
<aaa>aaa>
div>
<template id="aaa">
<div class="parent">
<p>父组件p>
<bbb>
<p>测试内容1p>
<p>测试内容2p>
<p>测试内容3p>
bbb>
div>
template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg2:'我是父组件的数据'
}
},
template:'#aaa',
components:{
'bbb':{
template:`
子组件
实名slot
可以用一个特殊的属性name来配置内容分发，根据name来匹配内容片段中有对应slot特性的元素。可以有多个不同名字的slot同时存在（不能有同名字的同时存在），并且此时也可以有一个匿名slot，作为找不到匹配的内容片段的备用插槽。
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="app">
<bbb>
<p>我是父组件p>
<p slot="myheader">我是头部p>
<p slot="myfooter">我是尾部p>
<p>测试用的p>
<p>默认实体1p>
bbb>
div>
<template id="temp1">
<div>
<p>我是子组件p>
<slot name="myheader">头部默认值slot>
<slot name="mybodyer">主体默认值slot>
<slot name="myfooter">尾部默认值slot>
<slot>slot>
<p>我是子组件p>
div>
template>
<script type="text/javascript">
Vue.component("bbb",{
template:'#temp1'
})
let vm=new Vue({
el:"#app",
data:{}
})
script>
body>
html>
路由
路由可以切换组件
<html>
<head>
<title>title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js">script>
head>
<body>
<div id="box">
<p>
<router-link to="/home">homerouter-link>
<router-link to="/news">newsrouter-link>
p>
<router-view>router-view>
div>
<script type="text/javascript">
// 1. 定义（路由）组件。
const Home = { template: '首页' }
const News = { template: '新闻' }
// 2. 定义路由
// 每个路由应该映射一个组件
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News }
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
var vm = new Vue({
el: '#box',
data: {},
// 将路由添加到Vue中
router
})
// 现在，应用已经启动了！
script>
body>
html>
路由嵌套
<html>
<head>
<meta charset="utf-8">
<title>路由title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js">script>
head>
<body>
<div id="app">
<router-link to="/home">首页router-link>
<router-link to="/news">新闻router-link>
<router-view>router-view>
div>
<script type="text/javascript">
const Home={
template:`
首页
登录
注册
新闻
`
}
const Login={template:``}
const Register={template:``}
const route=[
{path:'/',component:Home},
{path:'/home',component:Home,
children:[
{path:'/login',component:Login},
{path:'/register',component:Register}
]
},
{path:'/news',component:News}
]
const router=new VueRouter({
routes:route
})
let vm=new Vue({
el:"#app",
data:{},
router
})
script>
body>
html>
路由传参
<html>
<head>
<title>title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
head>
<body>
<div id="box">
<p>
<router-link to="/home">homerouter-link>
<router-link to="/news">newsrouter-link>
p>
<router-view>router-view>
div>
<template id="home">
<div>
<h2>首页h2>
<router-link to="/home/login">登录router-link>
<router-link to="/home/reg">注册router-link>
<router-view>router-view>
div>
template>
<template id="news">
<div>
<h2>新闻列表h2>
<ul>
<li>
<router-link to="/news/001">新闻001router-link>
li>
<li>
<router-link to="/news/002">新闻002router-link>
li>
ul>
div>
template>
<template id="login">
<div>登录界面div>
template>
<template id="reg">
<div>注册界面div>
template>
<template id="NewsDetail">
<div>
新闻详细页面
<span>{{$route.params.id}}span>
div>
template>
<script type="text/javascript">
// 1. 定义（路由）组件。
const Home = { template: '#home' };
const News = { template: '#news' };
const Login = { template: '#login' };
const Reg = { template: '#reg' };
//新闻详细页组件
const NewsDetail = { template: '#NewsDetail' };
// 2. 定义路由
const routes = [
{ path: '/', redirect: '/home' },
{
path: '/home',
component: Home,
children:[
{ path: '/home/login', component: Login},
{ path: '/home/reg', component: Reg}
]
},
{ path: '/news', component: News,},
{ path: '/news/:id', component: NewsDetail },
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
var vm = new Vue({
el: '#box',
data: {},
// 将路由添加到Vue中
router
})
// 现在，应用已经启动了！
script>
body>
html>
路由跳转
resultful风格
// 通过路由名称跳转，配置params参数。
this.$router.replace({ name: 'index', params: { id: Math.random() } });
// 直接跳转路由地址，参数直接带在路径中。
this.$router.push(`/news/${Math.random()}`);
常用风格（地址栏问号传参）
// 通过路由地址进行跳转，配置query参数。
this.$router.push({ path: '/user', query: { userId: 321 } });
路由监听
watch: {
// 监听路由跳转。
$route(newRoute, oldRoute) {
console.log('watch', newRoute, oldRoute)
},
},
导航守卫
路由的生命周期函数（钩子函数）
全局路由生命周期函数
router.beforeEach((to, from, next) => {}) 访问之前
router.beforeResolve((to, from, next) => {}) 解析之前
router.afterEach((to, from) => {}) 访问之后