vue 同一个页面路由无反应_一个vue路由的问题，路由改变，页面不变？

怎么测都是好的，代码如下，大部分copy你得代码，路径可能有点不同

效果如图

// 路由配置

import Vue from 'vue'

import VueRouter, { RouteConfig } from 'vue-router'

import Main from '../views/Main.vue'

Vue.use(VueRouter)

const routes: Array = [

{

path: '/login',

name: 'Login',

component: () => import('../views/Account/Login.vue')

},

{

path: '/',

name: 'Main',

component: Main,

redirect: 'home',

children: [

{

path: '/home',

name: 'Home',

component: () => import('../views/Home.vue')

},

{

path: '/about',

name: 'About',

// route level code-splitting

// this generates a separate chunk (about.[hash].js) for this route

// which is lazy-loaded when the route is visited.

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

},

]

},

]

const router = new VueRouter({

mode: 'history',

routes

})

export default router// login页面

跳转到首页

import { Component, Vue } from "vue-property-decorator";

export default class Login extends Vue {}

// main页面

Home |

About |

login

export default {

name: "Main"

}

// about页面

This is an about page

import {Component, Vue} from "vue-property-decorator";

@Component

export default class About extends Vue{

private created() {

console.log(this.$route)

}

}

// home页面

import {Component, Vue} from "vue-property-decorator";

@Component

export default class Home extends Vue {

}

// app页面

import {Component, Vue, Watch} from "vue-property-decorator";

@Component

export default class App extends Vue {

// @Watch('key')

// public watchKey(newV: any) { // console.log(newV) // } // // get key() { // console.log(1) // return this.$route.fullPath // }

public mounted() {

console.log(this.$route)

}

}

#app {

font-family: Avenir, Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

}

#nav {

padding: 30px;

a {

font-weight: bold;

color: #2c3e50;

&.router-link-exact-active {

color: #42b983;

}

}

}