框架小白白白白的进阶之路 --- （六）插槽与路由

最新推荐文章于 2022-08-13 23:34:42 发布

兜里ヌ有糖

最新推荐文章于 2022-08-13 23:34:42 发布

阅读量137

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_43980232/article/details/107910499

版权

笔记专栏收录该内容

60 篇文章 0 订阅

订阅专栏

插槽（slot）

匿名slot

当子组件模板中只有一个没有属性的slot时，父组件整个的内容都将插入到slot所在的位置，直接替换掉slot标签。需要注意的是，匿名slot最多只能有一个，多个匿名slot会导致程序报错。
我们也可以在slot标签中添加任何内容作为默认值，如果父组件中是有需要插入的内容时，这些默认值会被替换掉，只有当父组件里面没有内容时，才会显示这些默认值。

<div id="box">
        <aaa></aaa>
    </div>

    <template id="aaa">
        <div class="parent">
            <p>父组件</p>
            <bbb>
                <p>测试内容1</p>
                <p>测试内容2</p>
                <p>测试内容3</p>
            </bbb>
          </div>
    </template>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    data(){
                        return {
                            msg2:'我是父组件的数据'
                        }
                    },
                    template:'#aaa',
                    components:{
                        'bbb':{
                            template:`
                                <div class="child">
                                    <p>子组件</p>
                                    <slot></slot>
                                </div>
                                `,
                        }
                    }
                }
            }
        });
    </script>

在这里插入图片描述

实名slot

可以用一个特殊的属性name来配置内容分发，根据name来匹配内容片段中有对应slot特性的元素。可以有多个不同名字的slot同时存在（不能有同名字的同时存在），并且此时也可以有一个匿名slot，作为找不到匹配的内容片段的备用插槽。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<bbb>
				<p>我是父组件</p>
				<p slot="myheader">我是头部</p>
				<p slot="myfooter">我是尾部</p>
				<p>测试用的</p>
				<p>默认实体1</p>
			</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>

在这里插入图片描述

路由

路由可以切换组件

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/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` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/home">home</router-link>
        <router-link to="/news">news</router-link>
      </p>
          <!-- 路由出口 -->
          <!-- 路由匹配到的组件将渲染在这里 -->
          <router-view></router-view>
    </div>

    <script type="text/javascript">
        // 1. 定义（路由）组件。
        const Home = { template: '<div>首页</div>' }
        const News = { template: '<div>新闻</div>' }

        // 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>

路由嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/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:`
				<div>
					<p>首页</p>
					<router-link to="/login">登录</router-link>
					<router-link to="/register">注册</router-link>
					<router-view></router-view>
				</div>
				`
			}
			const News={
				template:`<p>新闻</p>`
			}
			const Login={template:`<form action="#" method="get"></br>
				用户名：<input type="text" /></br>
				密码：<input type="password" /></br>
				<input type="submit" value="登录" />
			</form>`}
			const Register={template:`<form action="#" method="get">
				用户名：<input type="text" /></br>
				密码：<input type="password" /></br>
				邮箱：<input type="text"/></br>
				电话：<input type="tel" /></br>
				<input type="submit" value="注册" />
			</form>`}
			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>

在这里插入图片描述

路由传参

<!DOCTYPE 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">home</router-link>
            <router-link to="/news">news</router-link>
        </p>
          <router-view></router-view>
    </div>

    <!-- 模板抽离出来 -->
    <template id="home">
        <!-- 注意：组件只能有一个根元素，所以我们包装到这个div中 -->
        <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">新闻001</router-link>
                </li>
                <li>
                    <router-link to="/news/002">新闻002</router-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) => {}) 访问之后

兜里ヌ有糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
框架小白白白白的进阶之路 --- （六）插槽与路由

插槽（slot）匿名slot当子组件模板中只有一个没有属性的slot时，父组件整个的内容都将插入到slot所在的位置，直接替换掉slot标签。需要注意的是，匿名slot最多只能有一个，多个匿名slot会导致程序报错。我们也可以在slot标签中添加任何内容作为默认值，如果父组件中是有需要插入的内容时，这些默认值会被替换掉，只有当父组件里面没有内容时，才会显示这些默认值。<div id="box"> <aaa></aaa> </div&g
复制链接

扫一扫