28_路由

28_路由

npm i vue-router@3

01_基本路由效果实现

1.创建文件夹router 创建文件 index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from '../components/About'
import Home from '../components/Home'


//创建并暴露一个路由器
export default new VueRouter({
  routes: [
    {
      path: "/about",
      component: About,
    },
    {
        path: "/home",
        component: Home,
      },
  ],
});

2.main.js

import Vue from "vue";
import App from "./App.vue";

//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'
Vue.config.productionTip = false;
//应用插件
Vue.use(VueRouter)

new Vue({
  render: (h) => h(App),
  router:router
}).$mount("#app");

3.About.vue

<template>
  <h2>
      我是About内容
  </h2>
</template>

<script>
export default {
name:'About',
}
</script>

4.Home.vue

<template>
  <h2>
      我是Home内容
  </h2>
</template>

<script>
export default {
name:'Home',
}
</script>

5.App.vue

<template>
  <div id="app">
    <h1>Vue Router Demo</h1>
    <!-- 原始html使用a标签实现页面的跳转 -->
    <!-- <div><a href="./about.html">About</a></div>
    <a href="./home.html">Home</a> <hr> -->

    <div>
      <router-link to="/about">About</router-link>
      <hr>
      <router-link to="/home">Home</router-link>
      <hr />

      <div>
        <!-- 指定组件的呈现位置 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

几个注意点

02_嵌套(多级)路由

代码演示

一般路由组件放在pages下，一般组件放在components下

Home.vue

<template>
  <div>
    <h2>我是Home内容</h2>
    <ul>
        <li>
            <router-link to="/home/news">News</router-link>
        </li>
        <li>
            <router-link to="/home/message">Message</router-link>
        </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

03_路由传参

代码演示

router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "../components/About";
import Home from "../components/Home";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";
//创建并暴露一个路由器
export default new VueRouter({
  routes: [
    {
      path: "/about",
      component: About,
    },
    {
      path: "/home",
      component: Home,
      children: [
        {
          path: "news",
          component: News,
        },
        {
          path: "message",
          component: Message,
          children: [
            {
              path: "detail",
              component: Detail,
            },
          ],
        },
      ],
    },
  ],
});

Message.vue

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!-- 第一种写法 to的字符串写法-->
        <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">
          {{ m.title }}
        </router-link> -->

        <!-- to的对象写法 -->
        <router-link :to="{
          path:'/home/message/detail',
          query:{
            id:m.id,
            title:m.title
          }
        }">
          {{ m.title }}
        </router-link>
        &nbsp;&nbsp;
      </li>
      <hr />
      <router-view></router-view>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      messageList: [
        { id: "001", title: "消息001" },
        { id: "002", title: "消息002" },
        { id: "003", title: "消息003" },
      ],
    };
  },
};
</script>

Detail.vue

<template>
  <ul>
      <li>消息编号: {{$route.query.id}} </li>
      <li>消息标题:  {{$route.query.title}} </li>
  </ul>
</template>

<script>
export default {
name:'Detail',
}
</script>

04_命名路由

05_路由的params参数

3.接收参数

<li>消息编号: {{$route.params.id}} </li>
<li>消息标题:  {{$route.params.title}} </li>

06_路由的props参数

作用：让路由组件更方便的收到参数

import VueRouter from "vue-router";
import About from "../components/About";
import Home from "../components/Home";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";
export default new VueRouter({
  routes: [
    {
      path: "/about",
      component: About,
    },
    {
      path: "/home",
      component: Home,
      children: [
        {
          path: "news",
          component: News,
        },
        {
          path: "message",
          component: Message,
          children: [
            {
              path: "detail",
              component: Detail,
              //props的第一种写法，值为对象 (用的非常少)
              //该对象中的所有key-value都会以props的形式传给Detail组件
              //props:{a:1,b:'hello'}

              //props的第二种写法,值为布尔值，
              //若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
              //props:true

              //props的第三种写法,值为函数
              props($route){
                return {id:$route.query.id,title:$route.query.title}
              }
            },
          ],
        },
      ],
    },
  ],
});

Message.vue

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <router-link :to="{
          path:'/home/message/detail',
          query:{
            id:m.id,
            title:m.title
          }
        }">
          {{ m.title }}
        </router-link>
        &nbsp;&nbsp;
        </li>
      <hr />
      <router-view></router-view>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      messageList: [
        { id: "001", title: "消息001" },
        { id: "002", title: "消息002" },
        { id: "003", title: "消息003" },
      ],
    };
  },
};
</script>

Detail.vue

<template>
  <ul>
       <li>消息编号: {{id}} </li>
      <li>消息标题:  {{title}} </li>
  </ul>
</template>

<script>
export default {
name:'Detail',
props:['id','title']
}
</script>

07_< router-link >的replace属性

1.作用:控制路由跳转时操作浏览器历史记录的模式

2.浏览器的历史记录有两种写入方式:分别为push和replace,push是追

加历史记录，replace是替换当前记录l路由跳转时候默认为push

3.如何开启replace模式:<router-link replace …>News< /router-1ink >