vue页面跳转

第一步在.vue组件里添加标签，格式如下

<div id="app"><p>    <!-- 使用 router-link 组件来导航. -->    <!-- 通过传入 `to` 属性指定在main.js文件设置的别名链接，如/1 -->    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->    <router-link to="/1">Go to Foo</router-link></p><!-- 路由出口 --><!-- 点击<router-link>的时候指定的页面将渲染在这里 --><router-view></router-view></div>

第二步在main.js文件里配置路由，格式如下

import VueRouter from 'vue-router'// 1. 定义（路由）组件。// 加载组件import Page01 from './max'Vue.use(VueRouter)//全局安装路由功能// 2. 定义路由// 每个路由应该映射一个组件。 const routes = [  { path: '/1', component: Page01 }   //前面to指定的地方 path  /1]// 3. 创建 router 实例，然后传 `routes` 配置const router = new VueRouter({  routes})// 4. 创建和挂载根实例。// 记得要通过 router 配置参数注入路由，// 从而让整个应用都有路由功能new Vue({  el: '#app',  template: '<App/>',  components: { App },  router})// 现在，就可以重启试试了！

注意 routes 和 router 是不一样的单词，别眼花了

路由就是这么的简单！

第二种方法：

<div class="st"><!-- <router-link to="/newPage">指向主页面跳转</router-link><br/> --><!-- 点击<router-link>的时候指定的页面将渲染在这里 --><router-view></router-view><div class="usern" @click="naveTO">DIV跳转</div><br/></div>export default{methods : {  naveTO(){//页面跳转console.log("DIV跳转"); if ('/newPage' === -1) {window.history.back()return}if (/^javas/.test('/newPage') || !'/newPage') returnconst useRouter = typeof '/newPage' === 'object' || (this.$router && typeof '/newPage' === 'string' && !/http/.test('/newPage'))if (useRouter) {this.$router.push({path: '/newPage'})} else {window.location.href = '/newPage'}    }

然后是在父组件里向子组件里传值，格式如下