vue路由配置、传值、编程式导航

vue里的路由都是根据location跳转页面的

一、vue路由的配置与使用

1、安装 cnpm install vue-router --save-dev
2、新建一个路由文件route.js
3、在main.js中引入路由文件route.js，在new中注册
4、配置路由文件route.js

//路由的配置
第一步
import Vue from 'vue';
import vueRouter from 'vue-router'

import Home from '../component/home.vue'
import News from '../component/news.vue'
import detail from '../component/newsdetail.vue'
import myinfo from '../component/my.vue'
import login from '../component/login.vue'

第二步，与vue进行关联
Vue.use(vueRouter);

第三步路由配置   以下用到的组件都需要提前进行导入
const router = new vueRouter({
    routes: [
        {
            path: "/",  路径
            component: Home,  跳转组件
        }, 
        {
            path: "/news",
            component: News,
            children: [     News子路由
                {
                    path: "/news/newsdetail",
                    component: detail
                }
            ]
        },
        {
            path: "/user",
            component: myinfo
        },
       
        {
            path:"/login",
            component:login
        }
    ],
    mode: "history"   修改路由路径的模式location
});

第四步
暴露路由router

5、路由入口 <router-link to="路由路径"> 编译之后为a链接
6、路由出口 <router-view>
7、重定向 redirect 重定向路由

<template>
  <div id="app">
       <div>
           <router-link to="/">首页</router-link>
           <router-link to="/news">新闻</router-link>
           <router-link to="/user">我的</router-link>
       </div>
       <div>
           <router-view></router-view>
       </div>
  </div>
</template>

二、路由传值方式

1、动态传值
2、get方式传值

动态传值

1、路由文件中配置子父路由
2、和父路由同级，写动态传值path: "/news/newsdetail/:id"，
3、路由出口在app组件中 es6语法
4、获取路由传递的参数，可以在挂载完成的时候使用this.$route.params

router文件中
const router = new vueRouter({
    routes: [
        {
            path: "/",
            component: Home,
        }, {
            path: "/news",
            component: News,
            ------------------------------------------配置子父路由
            children: [
                {
                子路由
                    path: "/news/newsdetail",
                    component: detail
                }
            ]
        },
        {
            path: "/user",
            component: myinfo
        },
        {
            ------------------------------------------这里是配置动态传值
            path: "/news/newsdetail/:id",
            component: detail
        } ],
    mode: "history"//修改路由路径的模式location
});

news组件中
   <ul>
      <li v-for="(item,index) in msg" :key="index">
        <!-- 这是es6模板语法 -->
        第一种写法
        <router-link :to="`/news/newsdetail/${item.id}`"> {{item.name}}</router-link>
        第二种写法
        <router-link :to="'/news/newsdetail/'+item.id">{{item.name}}</router-link>
      </li>
    </ul>
    
<script>
export default {
  data() {
    return {
      msg: [
        {
          id: 1,
          name: "华为Mate30 上线",
          action: "/news/newsdetail/"
        },
        {
          id: 2,
          name: "今天是****节日",
          action: "/news/newsdetail/"
        }
      ]
    };
  }
};
</script>

detail组件中
    mounted(){
        //获取路由传递的参数
        动态路由传值   传递的参数在 this.$route  params
        console.log(this.$route.params.id);
    }

get传值

1、路由文件中配置子父路由
2、和父路由同级，写get传值path: "/news/newsdetail"，
3、路由出口在子路由跳转的组件news组件 {path:'/news/newsdetail',query:{id:item.id}}
4、获取路由传递的参数，可以在挂载完成的时候使用this.$route.query

const router = new vueRouter({
    routes: [
        {
            path: "/",
            component: Home,
           
        }, {
            path: "/news",
            component: News,
            children: [
                {
                    path: "/news/newsdetail",
                    component: detail
                }
            ]
        },
        {
            path: "/user",
            component: myinfo
        },

         {
             这里是配置get传值
             path: "/news/newsdetail",
             component: detail
         },
    ],
    mode: "history"//修改路由路径的模式location
});

news组件中
    <ul>
      <li v-for="(item,index) in msg" :key="index">
       <router-link :to="{path:'/news/newsdetail',query:{id:item.id}}">{{item.name}}</router-link>
      </li>
    </ul>

detail组件中
    mounted(){
		get传值
        console.log(this.$route.query.id);
    }

三、编程式导航

使用代码控制路由
步骤：
1、配置路由 2、写函数

第一种>直接在方法里面写 路由路径

 home组件中
 <button @click="login">跳转登录界面</button>
  methods:{
        login(){
            第一种写法  直接在方法里面写 路由路径
            this.$router.push("/login");
            还可以这样  带参
            this.$router.push({
                path:"/login"
            });

第二种>带参数的编程式导航

home组件中
            第二种写法  带参数的编程式导航
             this.$router.push({
                path:"/login",
                query:{id:111}
            });
        }}

四、路由返回

login组件中
 <button @click="back">返回</button>
 methods: {
    back() {
      路由返回
      this.$router.back(-1);
      或者
       this.$router.go(-1);
    }
  }