Vue路由

路由说简单点就是来回跳页面
同级路由 子父路由

一.直接路由配置

路由器 根据location跳转页面
vue-router安装路由 cnpm install vue-router --save-dev
配置路由 main.js中进行配置
1.引入 import vueRouter from ‘vue-router’
2.使用 Vue.use(vueRouter);
3.配置路由 path 路径 component 组件(不需要加双引号) name:名称
4.关联到vue
5.路由的入口点 <router-link to="/">首页</router-link>
这个标签相当于a链接，to相当于 a链接中的herf
6.路由的出口点 <router-view></router-view>
当你点那个内容的时候，这个内容所对应的组件会出现在出口点标签中，进行显示。
7.mode:“history” 将路径地址变为传统路径地址

redirect:"/news" 重定向路由

//main.js中内容
import Vue from 'vue'
import App from './App.vue'
import vueRouter from 'vue-router'
import News from './component/news.vue'
import Home from './component/home.vue'

Vue.use(vueRouter);

//配置  path 路径  component 组件 name:名称 children(子路由)
const router=new vueRouter({
  routes:[
    {
      path:"/",  //“/” 默认路由
      component:Home,
      redirect:"/news" 重定向路由
    },
    {
      path:"/news",
      component:News
    }
  ]
})

new Vue({
  el: '#app',
  router,  //关联到vue
  render: h => h(App)
})

//App.vue内容
<template>
  <div id="app">
    <div>
      <router-link to="/">首页</router-link>
      <router-link to="/news">新闻</router-link>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

将路由内容单独写在一个Js文件中，关联到vue里边，用export default打出，用import接收

二.子父路由配置

配置子父路由 children，也叫路由的嵌套
当点击this.msg的时候，xinwen.vue里边的内容会出现

//app.vue内容
    {
      path: "/news",
      component: News,
      children: [{
        path: "/news/xinwen",
        component: xinwen
    }

//news.vue中的内容
<template>
 <div>
     <div>
        <router-link :to="/news/xinwen">{{this.msg}}</router-link>
     </div>
    <div>
        <router-view></router-view>
    </div>
 </div>
</template>
<script>
export default {
    data(){
        return{
            msg:"华为mata1今日发布"
        }
    }
}
</script>

三.路由的传值

① 动态传值
动态传值用this.$route.params.id接收
用es6模板语法和字符串的拼接

② get方式传值 只是路径上多了个“？id=1”
get传值用this.$route.query.id接收
get传值不需要在后边path后边配置id

    {
      //这里配置动态传值   后边一个斜杠传一个值，要是传多个值，写多个斜杠既可
     path: "/news/xinwen/:id",
     component: xinwen
     }
    {
      //这里配置get传值   不需要在路径后边配置id，直接路径即可
     path: "/news/xinwen",
     component: xinwen
     }
<template>
 <div>
     <ul>
         <li v-for="(item,index) in msg" :key="index">
             //第一种写法  双引号里边套用es6模板语法进行拼接  
             <router-link :to="`/news/xinwen/${item.id}`">{{item.name}}</router-link>
             //第二种写法 字符串的拼接 
              <router-link :to="'/news/xinwen/'+item.id">{{item.name}}</router-link>
              //第三种写法 对象型写法 get路由传值
              //query 请求的参数
             <router-link :to="{path:'/news/xinwen',query:{id:item.id}}">{{item.name}}</router-link>
         </li>
     </ul>
    <div>
        <router-view></router-view>
    </div>
 </div>
</template>
<script>
export default {
    data(){
        return{
            msg:[{
                id:1,
                name:"华为mata1今日发布",
                action:"/news/xinwen/"
            },
            {
                id:2,
                name:"华为mata2今日发布",
                action:"/news/xinwen/"
            }]
        }
    }
}
</script>


//获取动态路由传值 在xinwen.vue组件
    mounted(){
        //传值传过去后要接收值  动态传值用params接收   get传值用query接收
        //路由动态传值  传递的参数在 this.route上
        //console.log(this.$route.params.id);
        console.log(this.$route.query.id);  //get路由传值，获取参数
    }

四.路由的编程式导航

① 用代码操作路由 ，直接跳转至其他页面
eg: 进页面后，问是否登录，点确定会跳到登录页面
② 第一种写法 直接在方法里边写路由的路径
this.$router.push(" 路径 ")
③ 第二种 this.$router.push({ path:“路径” })
④ 第三种 代参的编程式导航 路径后边会多一个 “？id=111”

⑤ 用this.$route.query.id接收传的值

    {
      path:'/login',
      component:login
    }
    
 <template>
 <div>
     我是首页
     //点击此按钮要编程式导航到“/login”界面
     <button @click="login">跳转登录界面</button>
 </div>
</template>
<script>
export default {
    methods:{
        login(){
        	//第一种写法 直接方法里边写路径
            this.$router.push("/login")
            //第二种写法
             this.$router.push({
                 path:"/login"
             })
            //第三种  带参的编程式导航
            this.$router.push({
                path:"/login",
                query:{id:111}
            })
        }
    }
}
</script>

//在login.vue中接收
<script>
export default {
    mounted(){
        console.log(this.$route)
        console.log(this.$route.query.id);
    }
}
</script>

五.路由返回

微信聊天，一个返回键，退出当前界面
给返回键写事件，事件里边写方法 this.$router.back(-1);

<template>
 <div> 登录界面
     <button @click="back">返回</button>
 </div>
</template>
<script>
export default {
    methods:{
        back(){
            //返回它的上一个界面
            this.$router.back(-1);
        }
    }
}
</script>

注：home,my,news是App的三个子组件
xinwen是news的子组件
login是为了写编程式路由而创建出的组件
routers.js是将路由封装而创建出的文件