1 params 传参
注意⚠️：params传参 ，路径不能使用path 只能使用name,不然获取不到传的数据
this.$router.push({name: 'dispatch', params: {paicheNo: obj.paicheNo}})
取数据：this.$route.params.paicheNo
this.$route.params.paicheNo
2 query传参
this.$router.push({path: '/transport/dispatch', query: {paicheNo: obj.paicheNo}})
取数据：this.$route.query.paicheNo
this.$route.query.paicheNo
两种路由模式
mode：hash模式
mode：history
路由原数据
meta:{
login：true
}
在index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import One from '@/components/One'
import Two from '@/components/Two'
import Gn from '@/components/gn'
import Gj from '@/components/gj'
import User from '@/components/users'
import Computer from '@/components/Computers'
import NotFound from '@/components/notfound'
import List from '@/components/List'
import Login from '@/components/Login'
import UserInfo from '@/components/User'
Vue.use(Router)
var router = new Router({
mode:'history',
routes: [
{
path: '/', //当path比较长的时候，用name方便
redirect:{'name':'one'}
},
{
path: '/one',
name: 'one',
component: One
},
{
path: '/user',
name: 'user',
component: User
},
{
path: '/computer',
name: 'computer',
component: Computer
},
{
path:'/login',
name:'login',
component:Login
},
{
path:'/userinfo',
name:"userinfo",
component:UserInfo,
meta:{
login:true
}
},
{
path:'/list/:type', //路由传参第一步
name:'list',
component:List,
props:true,
beforeEnter:(to,from,next)=>{
// if(sessionStorage.getItem("user")){
// next();
// }
// else{
// alert("meiyoudenglu")
// }
next();
},
meta:{
login:true
}
},
{
path: '/two',
name: 'two',
component: Two,
redirect:{"path":'/two/gn'},
children:[
{ path:"/two/gn",
component:Gn
},
{
path:"/two/gj",
component:Gj
}
]
},
{
path:'**',
component:NotFound
}
]
})
router.beforeEach((to,from,next)=>{
if(to.meta && to.meta.login){ //条件成立的话必须要登陆才能访问组件
if(sessionStorage.getItem("user")){ //表示登陆过
next();
}
else{
router.push("/login”); //注意在守卫中 为this.$router == router
}
}
else{
next();
}
})
export default router;
login.vue
<template>
<div>
<input type="text" v-model="username"/>
<input type="text" v-model="password"/>
<button @click="login">登录</button>
</div>
</template>
<script>
export default{
data(){
return{
username:"",
password:""
}
},
methods:{
login(){
if(this.username=="admin" && this.password=="123"){
sessionStorage.setItem("user",this.username); //存数据
this.$router.push(“/user"); //跳转
}
}
}
}
</script>
<style>
</style>
App.vue
<template>
<div id="app">
<div v-if="username">你好{{username}}<button @click="quit">退出</button></div>
<MyHeader />
<router-link to="/one">one</router-link>
<router-link to="/two">two</router-link>
<!-- <router-link to="/user">user</router-link>
<router-link to="/computer">computer</router-link> -->
<!--
<router-link to="/list/list">user</router-link>
<router-link to="/list/computers">computer</router-link> -->
<button @click="go('list')">用户列表</button>
<button @click="go('computers')">电脑列表</button>
<router-view @name="receive" /> //接受子组件传值
</div>
</template>
<script>
import MyHeader from '@/components/MyHeader'
export default {
name: 'App',
components:{
MyHeader
},
data(){
return {
username:""
}
},
methods:{
go(type){
console.log(this.$router)
//this.$router.push('/list/'+type);
// this.$router.push({path:'/list/'+type})
this.$router.push({'name':'list',params:{type},query:{a:2,b:3}})
},
receive(name){
this.username=name;
},
quit(){
this.username="";
sessionStorage.clear(); //清除页面内容
this.$router.push("/login");
}
}
}
</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;
}
.router-link-exact-active{
color:red;
}
</style>
user.vue
<template>
<div>
<ul>
<li v-for="item in list">{{item.name}}</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
list:[]
}
},
created(){
this.$http.get("http://localhost:3000/list").then((res)=>{
this.list = res.data;
})
}
}
</script>