vue怎么跳转页面呢？不知道的小伙伴来看看小编今天的分享吧!
vue有三种不同方式实现页面跳转。
方法一：Vue：router-lin
<router-link to="/">[跳转到主页]</router-link>
<router-link to="/login">[登录]</router-link>
<router-link to="/logout">[登出]</router-link>
方法二：this.$router.push("/");
<button @click="goHome">[跳转到主页]</button>
export default {
name: "App",
methods: {
// 跳转页面方法
goHome() {
this.$router.push("/");
},
}
方法三：this.$router.go(1);
<button @click="upPage">[上一页]</button>
<button @click="downPage">[下一页]</button>
upPage() {
// 后退一步记录，等同于 history.back()
this.$router.go(-1);
},
downPage() {
// 在浏览器记录中前进一步，等同于 history.forward()
this.$router.go(1);
}
代码示例：
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<router-link to="/">[跳转到主页]</router-link>
<router-link to="/login">[登录]</router-link>
<router-link to="/logout">[登出]</router-link>
<!-- javascript跳转页面 -->
<button @click="goHome">[跳转到主页]</button>
<!-- 回到上一页 -->
<button @click="upPage">[上一页]</button>
<button @click="downPage">[下一页]</button>
<!-- 回到下一页 -->
</div>
</template>
<script>
export default {
name: "App",
methods: {
// 跳转页面方法
goHome() {
this.$router.push("/");
},
upPage() {
// 后退一步记录，等同于 history.back()
this.$router.go(-1);
},
downPage() {
// 在浏览器记录中前进一步，等同于 history.forward()
this.$router.go(1);
}
}
};
</script>
以上就是小编今天的分享了，希望可以帮助到大家。
第11天 | 14天搞定Vue3.0，自定义组件
在一个页面中，如果有代码重复的内容，那你可以将其抽出来，用Vue注册成局部组件；在一个Web系统中，如果有多个页面有共同的代码，那你可以将其抽出来，用Vue注册成全局组件。
组件可以扩展 HTML元素，封装可重用的代码。让我们可以用独立可复用的小组件来构建大型应用。其实，不用组件也可以，只是复制粘贴多了，键盘容易坏(这里瞎说的，别当真)。
其实，如果你用第3方现成的组件库的话，自定义组件，用得很少，甚至不用，我这边就很少用，但这是一个知识点，你还是学一下比较好。
11.1 局部注册在一个页面中，将其重复的内容抽出来，注册成组件，比如我想在一个页面中，多次出现介绍老陈的情况，我就将其注册成组件<laochen>。在需要用的地方直接引进<laochen></laochen>这个组件即可，以此来达到复用的目标。其实我用老陈做组件，就是为了寻找存在感。哈哈~~
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue3.0组件注册</title> <script src="vue.global.js"></script></head><body><div id="app"> <laochen></laochen> 好多内容啊.........<br/> <laochen></laochen></div><script> // 创建一个Vue 应用 const app = Vue.createApp({}) // 定义一个名为laochen的新页面组件 app.component('laochen', { data() { return { lang: "Vue3.0" } }, template: `<span style="color: darkgreen"> 老陈说编程：{{ lang }}</span><br/>` }) app.mount('#app')</script></body></html>
输出结果
11.2 全局注册如果在整个Web系统中，有重复代码存在的话，那可以将共同的内容，放到一个js文件中。之后，在需要用到的页面进行引进即可。
自己新建一个c.js文件并在里面敲入如下内容。如果你不叫老陈，那你可以改成老王，老刘，老李，老林，老油条......，你喜欢就好。
const ComponentA = { template: `<span style="color: darkgreen">老陈说编程：</span> <p> 一个当了10年技术总监的老家伙，分享多年的编程经验。<br/> 想学编程的朋友，可关注今日头条：老陈说编程。<br/> 我在分享Python，前端、Java和App方面的干货。关注我，没错的。 </p>`}
html页面文件内容，注意引进c.js文件。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue3.0组件注册</title> <script src="vue.global.js"></script> <script src="c.js"></script></head><body><div id="app"> <laochen></laochen> <hr style="background-color:green;height: 1px"/> <laochen></laochen></div><script> const app = Vue.createApp({ components: { 'laochen': ComponentA } }) app.mount('#app')</script></body></html>
输出结果
好了，有关Vue3.0自定义组件的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注今日头条：老陈说编程。我在分享Python，前端、Java和App方面的干货。关注我，没错的。
