刚学了vue路由,昨天想写个简单页面跳转到HelloWorld页面,发现跳转之后标题和输入框的元素都还存在,一直不知道怎么回事。

运行之后的首页

 按跳转按钮之后的页面

一开始想的是App.vue入口页面写一个登录的用户名密码输入框,一个按钮,点击按钮就能跳转到HelloWorld页面,结果发现跳转之后输入框元素还在页面上,我的理解是那些元素是写死的,去不掉的,一直都是在单页面上的。后来是在components里新建了一个Login登录页面,通过路由设置Login为首页,在Login写个跳转到HelloWorld的方法,App.vue里的结构只写router-view占位符,这样就解决啦!

index.js
// import Vue from 'vue' import VueRouter from "vue-router"; import HelloWorld
from '../components/HelloWorld' import Login from '../components/Login' //
Vue.use(VueRouter) export default new VueRouter({ routes: [ { //入口设置成Login页面
path: '', component: Login }, { path: '/helloWorld', component: HelloWorld },]
})
main.js
import Vue from 'vue' import App from './App.vue' import router from
'./router' import VueRouter from 'vue-router' Vue.use(VueRouter)
Vue.config.productionTip = false new Vue({ render: h => h(App), router: router
}).$mount('#app')
 Login.vue
<template> <div> <h2>跳转专用</h2> 文字: <input type="text"> <br> 文字: <input
type="text"> <br> <button @click="zou">给我跳!!!</button> <!--
<router-view></router-view> --> </div> </template> <script> export default {
name: 'myAbout', methods: { zou(){ console.log(this.$router);
this.$router.push('/helloWorld') } }, } </script> <style> </style>
 App.vue
<template> <div id="app"> <!-- 正确写法 (用来承载两个页面) --> <router-view></router-view>
<!-- 我以为入口要这样写,导致无法完全跳转 --> <!-- 文字 <input type="text"> <br> 文字 <input
type="text"> <br> <button @click="zou">跳转</button> <router-view></router-view>
--> </div> </template> <script> export default { name: 'App', methods: { zou(){
console.log(this.$router); this.$router.push('/helloWorld') } }, } </script>
<style> #app { font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
text-align: center; color: #2c3e50; margin-top: 60px; } </style>
 然后HelloWorld就是官方的,把{{msg}}改成了文字而已。

这样就解决啦!

 

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信