路由的使用

Posted 2023-04-18

参考技术A 　　（1）监听地址栏的变化

　　（2）根据地址栏的变化切换到对应的组件

1、创建一个vue项目：vue create routerdemo

　　注意：在选择插件的时候只选择babel

2、安装路由插件：npm install vue-router

3、创建路由：src下新建router.js，抛出router实例

import Vue from "vue";

// 引入vueimport Router from "vue-router";

// 引入vue-routerVue.use(Router);

// 使用路由import Recommend from "./Recommend.vue";

// 引入Recommend

组件import Singer from "./Singer.vue"

;// 引入Singer组件const router=newRouter(// 实例化router对象mode:"hash",

// 使用hash路由，带#号routes:[

// 路由的配置项path:"/recommend",component:Recommend,

// recommend路径对应Recommend组件path:"/singer",component:Singer,

// singer路径对应Singer组件    ]

);

export defaultrouter;// 抛出路由

4、使用路由：js的入口文件main.js中引入并使用

 5、在根组件App.vue中  router-view  开辟一块空间：

 6、地址栏后面输入路径显示对应的组件：

　　　　插一句：3002的端口号是在vue.config.js中配置的：

module.exports=

    　　　　devServer:

        　　　　port:3002  　　　　

　　　　

7、router-link标签，点击跳转

        <router-link to="/recommend" tag="div" activeClass="active">推荐</router-link>

        <router-link to="/singer" tag="div" activeClass="active">歌手</router-link>

        　　to：跳往的路径

       　　 tag：要渲染成的标签，默认是a标签

     　　   activeClass：当前标签添加类名

使用静态路由连通全网

主要特点手动配置静态路由需要管理员根据实际需要一条条自己手动配置，路由器不会自动生成所需的静态路由的。静态路由中包括目标节点或目标网络的IP地址，还可以包括下一跳IP地址（通常是下一个路由器与本地路由器连接的接口IP地址），以及在本路由器上使用该静态路由时的数据包出接口等。路由路径相对固定因为静态路由是手动配置的，静态的，所以每个配置的静态路由在本地路由器上的路径基本上是不变的...
主要特点
手动配置
静态路由需要管理员根据实际需要一条条自己手动配置，路由器不会自动生成所需的静态路由的。静态路由中包括目标节点或目标网络的IP地址，还可以包括下一跳IP地址（通常是下一个路由器与本地路由器连接的接口IP地址），以及在本路由器上使用该静态路由时的数据包出接口等。
路由路径相对固定
因为静态路由是手动配置的，静态的，所以每个配置的静态路由在本地路由器上的路径基本上是不变的，除非由管理员自己修改。另外，当网络的拓扑结构或链路的状态发生变化时，这些静态路由也不能自动修改，需要网络管理员需要手工去修改路由表中相关的静态路由信息。
永久存在