vue实现页面跳转,php实现简单留言板

vue 跳转页面并且传值以及在新窗口打开页面的方法
1、建一个跳转页面demo.vue

<template> <el-row> <p>跳转界面1</p> <el-button style="float: left" type="primary" @click="show3">跳转回主页</el-button> </el-row></template><script> export default { name: 'demo', methods : { show3(){ this.$router.push({ path:"/"}) }, } }</script>

主界面：

<template> <div class="hello"> <el-row style="margin-left: 10%"> <el-button style="float: left" type="primary" @click="show1">查询</el-button> <el-button style="float: left" type="primary" @click="show3">跳转</el-button> <el-button @click="toDemo"> 新页面打开demo页 </el-button> <router-link target="_blank" :to="{name:'demo',params:{id:78}}"> 新页面打开demo页1 </router-link> </el-row> </div></template><script> import ElButton from "../../node_modules/element-ui/packages/button/src/button.vue"; import ElInput from "../../node_modules/element-ui/packages/input/src/input.vue"; export default { components: { ElInput, ElButton }, name: 'HelloWorld', data() { return { tableData:[], city:"", }; }, methods: { toDemo () { this.$router.push({ name:"demo",params:{id:78}}) }, show3(){ this.$router.push({ path:"/demo"}) }, }</script>

2、在ruoter的index.js注册路由

import Vue from 'vue'import Router from 'vue-router'import demo from '@/components/demo'import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/demo', name: 'demo', component: demo }, ]})

3、在main.js引入router

import Vue from 'vue'import App from './App'import router from './router'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', router, render: h => h(App)})

其他：

跳转页面并且是新窗口打开

<router-link target="_blank" :to="{path:'/demo',query:{id:78}}"> 新页面打开demo页</router-link><router-link target="_blank" :to="{name:'demo',params:{id:78}}"> 新页面打开demo页1</router-link>有些时候需要在单击事件或者在函数中实现页面跳转，那么可以借助router的示例方法，通过编写代码实现。我们常用的是router.push 和router.go 但是vue2.0以后，这种方式就不支持新窗口打开的属性了，这个时候就需要使用this.$router.resolve,如下：```javascript<el-button @click="toDemo"> 新页面打开demo页</el-button>toDemo () { //这是第二种 let routeUrl = this.$router.resolve({ path: "/demo", query: {id:78} }); let routeUrl1 = this.$router.resolve({ name: "demo", params:{id:78} }); window.open(routeUrl.href, '_self'); //获取到值 // console.log(this.$route.query.id); // console.log(this.$route.params.id);},

仅跳页面的话用router.push和router.go 就好了

toDemo () { this.$router.push({ name:"demo",params:{id:78}}) // this.$router.push({ path:"/demo",params:{id:78}})},在demo界面获取带过来的参数mounted () { console.log(this.$route.params.id);}