说起路由你想起了什么？
路由是一个网络工程里面的术语。
路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动.
额, 啥玩意? 没听懂
早期的网站开发整个HTML页面是由服务器来渲染的.
但是, 一个网站, 这么多页面服务器如何处理呢?
上面的这种操作, 就是后端路由.
后端路由的缺点:
前后端分离阶段：
单页面富应用阶段:
前端路由的核心是什么呢？
我要评论window.location的href属性.location.hash来改变href, 但是页面不发生刷新history.pushState()history.replaceState()history.go()补充说明：
history.back() 等价于 history.go(-1)history.forward() 则等价于 history.go(1)目前前端流行的三大框架, 都有自己的路由实现:
当然, 我们的重点是vue-router
vue-router是基于路由和组件的
因为我们已经学习了webpack, 后续开发中我们主要是通过工程化的方式进行开发的.
npm install vue-router --saveVue.use()来安装路由功能)
Vue.use(VueRouter)使用vue-router的步骤:
<router-link>和<router-view>import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Vue from 'vue';
//配置路由相关信息
import Router from 'vue-router';
//1、通过Vue.use(插件)，安装插件
Vue.use(Router);
export default new Router({
//linkActiveClass：统一修改router-link的class属性
linkActiveClass: 'active',
mode: 'history',
]
});
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})
由于这部分比较复杂，可以在learnvuerouter查看我当时的练习vue-router的过程笔记和项目练习文件，也可以在官方文档中查看vue-router进行进一步学习。结合 HTML5 History API，你可以建立一个麻雀虽小五脏俱全的客户端路由器。可以直接看vue-router实例应用
我们这里还有一个不太好的实现:
如何可以让路径默认跳到到首页, 并且渲染首页组件呢?
routes: [
{
path: '',
//redirect重定向,实现默认进去就是首页
redirect: '/home'
},
配置解析:
我们前面说过改变路径的方式有两种:
如果希望使用HTML5的history模式, 非常简单, 进行如下配置即可:
export default new Router({
//linkActiveClass：统一修改router-link的class属性
linkActiveClass: 'active',
mode: 'history', //此行配置
在前面的中, 我们只是使用了一个属性: to, 用于指定跳转的路径.
还有一些其他属性:
tag: tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个
replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称.
<!-- router-view 根据当前的额路径，动态渲染出不同的组件 -->
<!-- <router-view></router-view>-->
<!-- tag: tag可以指定<router-link>之后渲染成什么组件,比如上面的代码会被渲染成一个<li> 元素,而不是<a>
-->
<!-- replace: replace不会留下history记录,所以指定replace的情况下，后退键返回不能返回到上一一个页面中
-->
<!-- active-class:当<router-link>对应的路由匹配成功时,会自动给当前元素设置一个router-link-active的class,
<!-- -->
<router-link to="/home" replace>首页</router-link>
<router-link to="/about" replace>关于</router-link>
<!-- 实现动态路由显示网页路径 除了前面的/user之外。后面还跟上了用户的ID-->
<router-link v-bind:to="'/user/'+userId" replace>用户</router-link>
该class具体的名称也可以通过router实例的属性进行修改
exact-active-class类似于
设置active-class可以修改默认的名称.
➢在进行高亮显示的导航菜单或者底部tabbar时,会使用到该类.
➢但是通常不会修改类的属性,会直接使用默认的router-link -active即可.
-->
<!-- <router-link to="/home" tag="button" replace active-class="active">首页</router-link>-->
<!-- <router-link to="/about" tag="button" replace active-class="active">关于</router-link>-->
<!-- 使用linkActiveClass -->
<!-- <router-link to="/home" tag="button" replace>首页</router-link>-->
<!-- <router-link to="/about" tag="button" replace>关于</router-link>-->
<!-- 不使用router-link实现，而是用代码的形式实现-->
<!-- <button @click="homeclick()">首页</button>-->
<!-- <button @click="aboutclick()">关于</button>-->
<!-- -->
有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了
不使用router-link实现，而是用代码的形式实现
<button @click="homeclick()">首页</button>
<button @click="aboutclick()">关于</button>
export default {
name: 'App',
data() {
return {
//实现动态的ID
userId: 'lisa'
}
},
methods: {
homeclick() {
//通过代码的方式修改路由 vue-router,$router属性来自源码
// this.$router.push('/home');
this.$router.replace('/home');
console.log('homeclik');
},
aboutclick() {
// this.$router.push('/about');
this.$router.replace('/about');
console.log('aboutclick');
},
在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：
/user/aaaa或/user/bbbb
除了有前面的/user之外，后面还跟上了用户的ID
这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。
{
path: '/user/:userId',
name: 'User',
component: User
},
<div>
<h2>我是用户界面</h2>
<p>我是用户的修昂管信息，he黑恶黑恶hi嗯哼IE</p>
<h2>{{userId}}</h2>
<h2>{{$route.params.userId}}</h2>
</div>
<router-link to="/user/123">用户</router-link>
官方给出了解释:
官方在说什么呢?
路由懒加载做了什么?
方式一: 结合Vue的异步组件和Webpack的代码分析.
const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};
方式二: AMD写法
const About = resolve => require(['../components/About.vue'], resolve);
方式三: 在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.
const Home = () => import('../components/Home.vue')
嵌套路由是一个很常见的功能
路径和组件的关系如下:
实现嵌套路由有两个步骤:
本文地址：https://blog.csdn.net/weixin_45333934/article/details/107484215
如对本文有疑问， 点击进行留言回复！！
vue-cli或vue项目利用HBuilder打包成移动端app操作
网友评论