当前位置：首页 > news >正文

wordpress非官方沈阳seo团队

news 2025/7/18 8:35:51

wordpress非官方,沈阳seo团队,专门做代工产品的网站,软件开发游戏公司1 路由相关路由的本质：一种对应关系。比如说输入要访问的url地址，浏览器要去请求这个url地址对应的资源。前端路由：依靠hash值(锚链接)的变化进行实现。即监听事件并分发执行事件处理函数，从而根据不同的事件来显示不同的页面内…

1 路由相关

路由的本质：一种对应关系。比如说输入要访问的url地址，浏览器要去请求这个url地址对应的资源。
前端路由：依靠hash值(锚链接)的变化进行实现。即监听事件并分发执行事件处理函数，从而根据不同的事件来显示不同的页面内容。
前端路由的核心实现：onhashchange 可以监听hash值变化

window.onhashchange = function(){//location.hash可以获取到最新的hash值console.log(location.hash);
}

在这里插入图片描述

2 简易路由实现tab栏切换

<!-- 被 vue 实例控制的 div 区域 -->
<div id="app"><!-- 切换组件的超链接 --><a href="#/zhuye">主页</a><a href="#/keji">科技</a><a href="#/caijing">财经</a><a href="#/yule">娱乐</a><!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 --><!-- 可以把 component 标签当做是【组件的占位符】 --><component :is="comName"></component>
</div>

<script>//  定义需要被切换的 4 个组件// 主页组件const zhuye = {template: '<h1>主页信息</h1>'}// 科技组件const keji = {template: '<h1>科技信息</h1>'}// 财经组件const caijing = {template: '<h1>财经信息</h1>'}// 娱乐组件const yule = {template: '<h1>娱乐信息</h1>'}// vue 实例对象const vm = new Vue({el: '#app',data: {comName: 'zhuye'},// 注册私有组件components: {zhuye,keji,caijing,yule}})   // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称window.onhashchange = function() {// 通过 location.hash 获取到最新的 hash 值console.log(location.hash);//  输出 #/zhuye 或者 #/keji  ...// slice(1)  从/开始截取字符串switch (location.hash.slice(1)) {case '/zhuye':vm.comName = 'zhuye'breakcase '/keji':vm.comName = 'keji'breakcase '/caijing':vm.comName = 'caijing'breakcase '/yule':vm.comName = 'yule'break}}
</script>

效果：点击每个超链接之后，地址栏发生变化，相应的内容切换
在这里插入图片描述

3 Vue Router

Vue.js官方提供的前端路由管理器
依赖于Vue。所以需要先引入Vue，再引入Vue Router

使用方式：

<head><!-- 1 导入 vue 文件 --><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 --><div id="app"><!-- 2  添加路由链接:是路由中提供的标签，默认会被渲染为a标签to属性默认被渲染为href属性，to属性的值会被渲染为#开头的hash地址 --><router-link to="/user">User</router-link><router-link to="/register">Register</router-link><!--3 添加路由填充位（占位符） --><router-view></router-view></div><script>// 4 定义路由组件const User = {template: '<h1>User 组件</h1>'}const Register = {template: '<h1>Register 组件</h1>'}// 5 创建路由实例对象，并配置路由规则const router = new VueRouter({// 路由规则routes: [{//path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址path: '/',redirect: '/user'}, {path: '/user',component: User}, {path: '/register',component: Register}]})// 创建 vm 实例对象const vm = new Vue({// 指定控制的区域el: '#app',data: {},// 6 挂载路由实例对象// router: routerrouter})</script>
</body>

效果：
在这里插入图片描述

4 嵌套路由

进行路由的时候显示的组件中还有新的子级路由链接以及内容。

比如以下路由：

/user
/register
- /register/tab1
- /register/tab2

<head><!-- 1 导入 vue 文件 --><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script>
</head>
<body><div id="app"><router-link to="/user">User</router-link><router-link to="/register">Register</router-link><!-- 路由占位符 --><router-view></router-view></div><script>const User = {template: '<h1>User 组件</h1>'}const Register = {template: `<div><h1>Register 组件</h1><hr/><!-- 子路由链接 --><router-link to="/register/tab1">tab1</router-link><router-link to="/register/tab2">tab2</router-link><!-- 子路由的占位符 --><router-view /><div>`}const Tab1 = {template: '<h3>tab1 子组件</h3>'}const Tab2 = {template: '<h3>tab2 子组件</h3>'}// 创建路由实例对象const router = new VueRouter({routes: [{ path: '/', redirect: '/user'},{ path: '/user', component: User },// children 数组表示子路由规则{ path: '/register', component: Register, children: [{ path: '/register/tab1', component: Tab1 },{ path: '/register/tab2', component: Tab2 }] }]})// 创建 vm 实例对象const vm = new Vue({el: '#app',data: {},// 挂载路由实例对象// router: routerrouter})</script>
</body>

效果：
在这里插入图片描述

5 动态路由匹配

（1）通过$route.params.id来获取路径传参

<body><div id="app"><router-link to="/user/1">User1</router-link><router-link to="/user/2">User2</router-link><router-link to="/user/3">User3</router-link><!-- 路由占位符 --><router-view></router-view>
</div><script>const User = {template: '<h1>User 组件 -- 用户id为: {{$route.params.id}}</h1>'}// 创建路由实例对象const router = new VueRouter({// 所有的路由规则routes: [{path: '/',redirect: '/user'}, {//通过/:参数名 的形式传递参数path: '/user/:id',component: User}]})// 创建 vm 实例对象const vm = new Vue({// 指定控制的区域el: '#app',data: {},// 挂载路由实例对象// router: routerrouter})
</script>

在这里插入图片描述

（2）通过props设置为true来接收参数

const User = {props: ['id'],template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'}// 创建路由实例对象
const router = new VueRouter({// 所有的路由规则routes: [{path: '/',redirect: '/user'}, {path: '/user/:id',component: User,//如果props设置为true，route.params将会被设置为组件属性props: true}]
})

（3）将props设置为对象，直接将对象的数据传递给组件使用

const User = {props: ['id', 'uname', 'age'],template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
}// 创建路由实例对象
const router = new VueRouter({// 所有的路由规则routes: [{path: '/',redirect: '/user'}, {path: '/user/:id',component: User,//如果props设置为对象，则传递的是对象中的数据给组件props: {uname: 'lisi',age: 20}}]
})

在这里插入图片描述

（3）将props设置为函数，获取传递的参数值和传递的对象数据

const User = {props: ['id', 'uname', 'age'],template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
}// 创建路由实例对象
const router = new VueRouter({// 所有的路由规则routes: [{ path: '/', redirect: '/user' },{path: '/user/:id',component: User,//如果props设置为函数，则通过函数的第一个参数获取路由对象//并可以通过路由对象的params属性获取传递的参数props: route => ({ uname: 'zs', age: 20, id: route.params.id })}         ]
})