路由有两种安装方式
1.在创建项目的时候一起安装路由
2.项目创建完后再命令行里安装
npm install vue-router --save-dev
安装完后会发现src文件夹里多了一个名为router的文件夹,里面有一个index.js的文件,路由需要在此配置
打开main.js
import router from './router/'
这时配置路由是无效的,因为main.js没有配置路由的路径
import router from './router/index.js'
然后在App.vue里面引入
路由的跳转都会在router-view中实现
此时打开index.js,简单介绍一下里面的内容
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Mt from '@/components/Mt'
//引入vue文件
Vue.use(Router) //注册路由组件
// 导出
export default new Router({
routes: [
{
path: '/',// /代表默认首页
name: 'Mt',
component:Mt
},
{
path:'/HelloWorld',
name:'HelloWorld',
component:HelloWorld
}
]
})
然后就可以在vue文件里实现路由的跳转了
有两种方式
1.标签跳转
<router-link to='/HelloWorld'></router-link>
2.js跳转
methods: {
btn: function() {
//跳转页面并传值 get跳转 刷新页面仍存在
this.$router.push({
path: '/DianCan',
query: {
username: "张三",
Password: "李四"
}
});
},
change: function() {
// 刷新页面时不存在,隐私不暴露 post传值
this.$router.push({
name: 'DianCan',
params: {
user: this.user,
upwd: this.upwd
}
})
}
}
接收数据
data () {
return {
// 接收传值
username:this.$route.query.username,
password:this.$route.query.Password,
user:this.$route.params.user,
upwd:this.$route.params.upwd
}
}