web create

小阿妍
181 阅读4分钟

使用router-view和router-link

router-view的用法通过路由在页面APP.vue展示组件

  • 若想展示Frank.vue里面的内容；
  • 需要在APP.vue里面，进行如下操作；
<template>
<Frank/>
</template>
<script>
import Frank from './components/Frank.vue'
export default {
name:'APP',
components:{
Frank
  }
}
</script>
  • 引入路由后，就简化了很多,直接写个router-view就可以了：
<template>
<router-view/>
</template>
<script>
export default{
name:'APP',
}
</script>
  • 想要这么简化，前提是先要在main.ts里面引入设置好路由
import {createWebHashHistory,createRouter} from 'vue-router'
import Frank from './components/Frank.vue'
const history = creatWebHashHistory()
const router = createRouter({
history:history,
routes:[
{path:'/',component:Frank}
]
})
const app = creaatApp(App)
app.use(router)
app.mount('#app')

router-link的用法

  • 在APP.vue里面
<template>
<div>导航栏|
<router-link to="/">Frank</router-link>|
<router-link to="/xxx">Frank2</rouer-link>
</div>
</div>
<router-view/>
</template>
<script>
export default{
name:'APP',
}
</script>

创建首页和文档页面

简单介绍

  • 目标，做成vue.js首页那样，有两个页面Home+Doc
    • Home上面Topnav有个logo+导航menu；
    • Home主页面Banner上：文件介绍+点击开始后，会跳转到Doc文档页面；
    • Doc文档页面的上端Topnav也是logo+导航；
    • Doc下面content分左右两边，左边是aside，右边是main；

下面是代码

- Home主页面的结构代码

<template>
<div>
<div class="topnav">
<div class="logo"></div>
<div class="menu"></div>
</div>
<div class="banner">
<h1>一个大轱辘<h1>
<h2>一个厉害的UI框架</h2>
<p class="actions">
<a>Gitup</a>
<a>开始</a>
</p>
</div>
</div>
</template>

- 下面是Doc的代码

<template>
<div>
<div class="topnav">
<div class="logo"></div>
<div class="menu"></div>
</div>
<div class="content">
<aside>边栏</aside>
<main>主内容</main>
</div>
</div>
</template>
  • 下面就是调整路由了：
import {createWebHashHistory,createRouter} from 'vue-router'
import Home from './components/Home.vue'
import Doc from './components/Doc.vue'

const history = creatWebHashHistory()
const router = createRouter({
history:history,
routes:[
{path:'/',component:Home},
{path:'/doc',component:Doc}
]
})
const app = creaatApp(App)
app.use(router)
app.mount('#app')

备注：若报错说找不到SASS,需要在终端yarn add sass

Home和Doc公用一个Topnav，将Topnav进行封装

  • 直接在components新建一个Topnav.vue文件；
  • 直接把Home或者Doc里面的Topnav相关内容剪切过来；
  • 加上合适的样式，这样一个Topnav就封装好了。
<template>
<div>
<div class="topnav">
<div class="logo">LOulGO</div>
<ul class="menu">
<li>菜单1</li>
<li>菜单2</li>
<ul>
</div>
</template>
  • 如何在Home和Doc里面引用Topnav
    • 在topnav原先的位置直接输入;
    • 在script里面进行引入;
 <template>
<div>
<Topnav/>
<div class="content">
<aside>边栏</aside>
<main>主内容</main>
</div>
</div>
<script lang="ts">
import Topnav from '../components/Topnav.vue'
export default{
components:{Topnav}
}
</script>

以上就是页面结构的全部内容。

接下来是完善页面了

  • 利用CSS将页面调整达到美观的效果；
  • 调整Home.vue的页面：h1 +h2 +两个链接
- 在<a>Gitup</a>上加一个跳转网址:<a href="https://github.com">Gitup</a>;
- 在<a>开始</a>上面加一个内部跳转链接：<router-link to = "/doc">开始<router-link>
  • 完善Doc的样式：边栏+主内容

点击切换aside：点击一次显示，再点击一次隐藏

  • 当点击Topnav里面的一个东西时，aside的内容隐藏；
  • 用一个变量menuvisible来表示，这个菜单是否显示；
  • 当menuvisible为true时，显示这个菜单，值为false时，不显示这个菜单
  • 把menuvisible放在topnav里面，aside无法访问，放在aside里面，topnav无法访问，所以只能放在最外层的app.vue里面。
  • 让APP标记一下其子组件是可以被访问的，用provide来标记；
  • 在topnav和aside里面用inject来接收；

具体代码操作

  • 首先在APP.vue里声明一个menuvisible；在setup里面声明，等于一个引用ref，默认值是false；
  • 用provide接收一个参数：provide('xxx',menuvisible)
<script>
export default{
name:'APP',
setup(){
const menuVisible = ref(false)
provide('xxx',menuVisible)
}
}
</script>

上面就是标记的全部内容,xxx是他的名字。

- 在TOPnav里面获取接下来是如何使用

  • 也是在setup里面，用inject来获取menuvisible的名字：inject（‘xxx’）；
  • 传给一个变量，这个变量叫做menuvisible：const menuvisible = inject('xxx');
  • 标注一个menuVisible的类型加一个<Ref>:const menuvisible = inject<Ref>('xxx');
  • topnav里面的关于隐藏aside的代码
<script lang ="ts">
import { inject,Ref} from 'vue'
export default {
setup(){
const menuvisible = inject<Ref<boolean>>('xxx');
}
}
</script>
  • 在Topnav里面的LOGO 处添加一个点击事件，把里面的值取反然后赋值给自己，
<div class="logo" @click="toggleMenu">LOGO</div>
------------------------
setup(){
--------
const toggleMenu = () =>{
menuVisible.value = !menuVisible.value
}
return{toggleMenu}
}
-------------DOC里面的aside加一个v-if，就是menuVisible变化时，aside也要变化
<aside v-if=“menuVisible”>

</aside>
并在下面的setup里面return一下
return {menuVisible}

手机页面上的切换按钮

  • 先设计一个图标，在手机页面上点击后可以切换，在PC页面上不需要；
  • 手机页面的表示方法:
  • 1)右边的menu隐藏起来；
  • 2)logo左右自动居中
  • 3)在logo左边添加一个切换按钮，直接在上面添加一个,在style中设置样式，是一个红色的框框
<span class="toggleAside" @click="toggleMenu"></span>
-----------------
> .toggleAside{
   width:24px;
   height:24px;
   background:red;
   position:absolute;
   left:16px;
   top:50%;
   transform:translateY(-50%);
   display:none;

}

------------------------------------
@media(max-width:500px){
>.menu{display:none;}
>.logo{margin:0 auto;}
>.toggleAside{display:inline-block;}
}

路由间的切换

  • Doc里面的小链接
const router = createRouter({
history:history,
routes:[
{path:'/',component:Home},
{path:'/doc',component:Doc,children:[
{path:'switch',component:SwitchDemo}
]}
]
})
在需要显示的地方写上<router-view>
  • 当点击aside里面的内容时，显示一个文档，此时需要aside边栏消失，如何做到？ 需要在main.ts里面加入：router.afterEach(()=>{}); 此时单独创建router.ts,所有相关的，都复制过来，把所有的router相关的代码放在router.ts文件里面。
  • 在App里面进行引用router.ts；
import {router} from "./router";
export default {
router.afterEach(() = >{
if (width<=500){
menuVisible.value = false;
}
})
}

上面这个代码就是点击连接后aside就会消失，

avatar
文章
阅读
粉丝