vue2启动打开指定页面，页面重定向与路由配置

要在Vue2中启动并打开指定页面，你可以使用路由器（router）。请按照以下步骤进行操作：

安装 

安装命令

首先，确保你已经安装了Vue Router。如果没有，请在终端中运行以下命令来安装它：

npm install vue-router

 vue2安装npm install vue-router报错原因分析和解决办法

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: vue-yiqing@0.1.0
npm ERR! Found: vue@2.6.14
npm ERR! node_modules/vue
npm ERR!   vue@"^2.6.11" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.2.0" from vue-router@4.0.14
npm ERR! node_modules/vue-router
npm ERR!   vue-router@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

 解决办法

这里指定了vue-router版本为3.2.0版本,正常安装成功

 npm install vue-router@3.2.0 -S

新建 router.js文件

在你的Vue项目中，创建一个名为router.js（或者任何你喜欢的名称）的文件来配置你的路由器。在这个文件中，导入Vue和Vue Router，并通过调用Vue.use()来使用Vue Router插件。

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    // 在这里定义你的路由
  ]
});

export default router;

在main.js中导入新建的router.js 

 在你的主应用程序文件（例如main.js）中，导入刚刚创建的路由器，并将其添加到Vue实例中。

import Vue from 'vue'
import App from './App.vue'
import router from './router/router.js'; // 导入你的路由器

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

 vue router 报错： Uncaught (in promise) NavigationDuplicated{_name:""NavigationDuplicated"... 的解决方法

vue router 报错： Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解决方法
最近在项目中，发现点击路由跳转相同地址会有这个报错

 

解决办法

在main.js下添加：

import Router from 'vue-router'
Vue.use(Router)
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

 

配置路由 

定义你的路由。在router.js文件的routes数组中，可以定义多个路由对象，每个对象代表一个页面。为了打开指定页面，你需要确保将该页面的路径（path）以及组件（component）定义在路由对象中。 

import HelloWorld from '../components/HelloWorld.vue';
import newfile from '../components/new_file.vue';

const router = new VueRouter({
	mode: 'history', 
  routes: [
	{ path: '/', redirect: '/newfile/newfile' }, 重定向
    { path: '/newfile/newfile',component: newfile }, // 首页
    { path: '/HelloWorld/HelloWorld',component: HelloWorld }, // 关于页面
    // 添加其他需要的页面路由
  ]
});



export default router;

修改 app.vue

在app.vue中添加 <router-view></router-view>代码

现在，你可以通过调用router.push()方法来打开指定的页面。例如，在一个按钮的点击事件处理程序中，你可以使用以下代码来打开关于页面：

<template>
  <div id="app">
   <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
 <!--   <HelloWorld msg="Welcome to Your Vue.js App"/> -->
 <router-view></router-view>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // HelloWorld
  },
  created () {
	this.$router.push('/'); // 页面加载时跳转
  }
  methods: {
    openAboutPage() {
      this.$router.push('/about');
    }
  }
}
</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>