©2020-2024 ioDraw All rights reserved
刚学了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}}改成了文字而已。
这样就解决啦！