Vue路由

最新推荐文章于 2022-10-19 21:26:42 发布

“落幕”

最新推荐文章于 2022-10-19 21:26:42 发布

阅读量44

点赞数

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

本文链接：https://blog.csdn.net/qq_15034541/article/details/114988860

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.5 Vue路由

1.5.1 router-link标签的使用。

<router-link to="写routers中定义的组件名称"></router-link> 是Vue-router.js中的组件

类似于a标签 to就相当于href

1.5.2 $mount代替el:""

 // 将当前 vue 实例挂载到 app dom 上，代替了el:"#app"
let app = new Vue({
        router,
      }).$mount("#app");
    </script>

注意：

1、要与路由出口配合使用，的作用是为匹配到的组件占据位置，匹配的组件的dom结构会在标签的位置展现。

2、要与

const router = new VueRouter({
routes:[
          { path: "/随机定义(这里定义什么<router-link to=""></router-link>中的to中就些什么)", component: 要写创建的组件名称。 },
        ],
}）

1.5.3 插槽

1.5.3. 1插槽的基本使用

插槽，通过<slot></slot>标签来实现直接在组件内写内容，
可以写常量、变量
 <div id="app">
     用了实例里面变量title
    <list-item>{{title}}</list-item>
    <list-item1>aaaaaa</list-item1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let listItem = {
      template: `
        <li><slot>列表项</slot></li>
      `
    }
    let listItem1 = {
      template: `
              <div>
                <p></p>
                <p><slot></slot></p>
              </div>
      `
    }
    let app = new Vue({
      el: '#app',
      data: {
        title: 'abc'
      },
      components: {
        'list-item': listItem,
        'list-item1': listItem1
      }
    })

这样的方法每一个slot的值都会是一样的接下来解决这个问题。

通过给slot设置name值来分别设置值

1.5.3.2 插槽通过name值来区别赋值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div id="app">
    <home>
      v-slot来指定name名
      <template v-slot:header>aaaa</template>
      <template v-slot:main>bbbb</template>
      <template v-slot:footer>cccc</template>
    </home>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let home = {
      template: `
      <div class="container">
        <header>
          //slot可以加一个name值来区别赋值
         <slot name="header"></slot>
        </header>
        <main>
          <!-- 我们希望把主要内容放这里 -->
          <slot name="main"></slot>
        </main>
        <footer>
          <!-- 我们希望把页脚放这里 -->
          <slot name="footer"></slot>
        </footer>
      </div>
      `
    }
    let app = new Vue({
      el: '#app',
      data: {},
      components: {
        'home': home
      }
    })
  </script>
</body>

</html>

“落幕”

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue路由

1.5 Vue路由1.5.1 router-link标签的使用。<router-link to="写routers中定义的组件名称"></router-link> 是Vue-router.js中的组件类似于a标签 to就相当于href1.5.2 $mount代替el:"" // 将当前 vue 实例挂载到 app dom 上，代替了el:"#app"let app = new Vue({ router, }).$mount("#app");
复制链接

扫一扫

专栏目录