Vue路由跳转了但是页面不跳转 router-view加上就报错了

1.为什么会出现这种情况

最近开始学习Vue的组件化开发，想要进行页面跳转就设置了路由：

const routes=[
    {
        path:'/',
        component:home
    },

    {
        path: '/login',
        component:login
    }
]

但是无论路由怎么跳转页面都只在home组件上.

这是因为忘记加router-view标签了，路由界面需要显示在router-view处，如果没有此标签就不会显示内容

2.解决办法

在需要显示路由页面处加上标签router-view

在Vue绑定的app div里面增加router-view

<template>
  <div id="app">
    <router-view>此处显示路由页面</router-view>
  </div>
</template>

——————————————————————————————————————————————————————————
版权声明：本文为CSDN博主「Mboss76」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45912825/article/details/117624935

• 这篇文章：解决vue跳转页面不刷新问题 也许能够解决你的问题，你可以看下
• 另外, 我还从CSDN技能树中找了一些相关资料给你, 你可以学习下:
• 相关参考资料: 页面跳转
• 相关习题: 路由跳转
• 除此之外, 这篇博客: Vue使用导航守卫管理页面跳转以及同步前后端登录状态中的 2. 使用Vue Route管理页面跳转 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 首先在定义路由时配置 meta 字段，例如：

  routes: [
        path: '/MainPage',
        name: 'MainPage',
        component: MainPage,
        meta: { requiresAuth: true }
  ]
  

  然后再前置守卫访问：

  router.beforeEach((to, from, next) => {
    //判断访问的页面是否有requiresAuth字段
    if (to.matched.some(record => record.meta.requiresAuth)) {
      // 如果未登录，则跳转到登录页面
      // 否则正常跳转
      if (!auth.loggedIn()) {
        next({
          path: '/login',
          query: { redirect: to.fullPath }
        })
      } else {
        next()
      }
    } else {
      next() // 确保一定要调用 next()
    }
  })