【vue中路由的使用】

- - - 什么是路由
    - - 后端路由：
      - 前端路由：
    - 路由的基本使用
    - 路由的跳转
    - 组件的嵌套
    - 路由重定向
    - 选中路由高亮
    - 代码解析

什么是路由

后端路由：

对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源

前端路由：

对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

路由的基本使用

● 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
● 创建路由new VueRouter(),接受的参数是一个对象
● 在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
● path属性是url的地址,component属性就是显示的组件（传组件的对象）
● 创建的路由需要和vue实例关联一下
● 路由到的组件显示在哪个位置

路由的跳转

● router-link标签可以设置to属性
● 默认是a标签，可以通过tag设置包裹标签
使用浏览器参数的方式传递参数
● 设置路由的时候/路由地址/:参数名
● 获取参数$route.params.参数名

组件的嵌套

● 声明路由的时候设置children,这是children是一个数组，数组里是路由对象
● 这个children的组件就会渲染在它父组件的中

路由重定向

redirect可以进行路由的重定向

选中路由高亮

使用默认的样式
直接设置 router-link-active
自定义样式
配置 linkActiveClass:‘自定义的类名’

代码解析

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><style>/* 路由高亮 */.router-link-active {font-size: 40px;color: pink;}.active {font-size: 40px;color: pink;}</style></head><body><div id='app'><!-- 1 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）2 创建路由new VueRouter(),接受的参数是一个对象3 在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性4 path属性是url的地址,component属性就是显示的组件（传组件的对象）5 创建的路由需要和vue实例关联一下6 路由到的组件显示在哪个位置 --><router-view></router-view><router-view name="detail"></router-view><router-view name="mine"></router-view><router-link :to="{path:'/detail', query:{courseid:123,id:456} }">去详情1</router-link><router-link :to="{name:'my',params:{ids:789} }">去个人中心</router-link></div><template id="index"><div>首页<a href="#/detail?coreseId=123">去详情a</a><router-link to="/detail">去详情</router-link><router-link :to="{path:'/detail', query:{courseid:123,id:456} }">去详情1</router-link><router-link :to="{name:'my',params:{ids:789} }">去个人中心</router-link><!-- 去个人中心1 --><button @click="toDetail">toDetail</button><button @click="toMine">toMine</button></div></template><!-- 1. 声明路由的时候设置children,这是children是一个数组，数组里是路由对象 2. 这个children的组件就会渲染在它父组件的中 --><template id="detail"><div>详情页<router-view></router-view></div></template><template id="mine"><div>个人中心</div></template><template id="play"><div>play</div></template><template id="study"><div>study</div></template><script>let play = {template: '#play'}let study = {template: '#study'}let index = {template: '#index',methods: {toDetail() {console.log(1);// this.$router.push('/detail')this.$router.push({path: '/detail',query: {id: 12312}})},toMine() {this.$router.push({name: 'my',params: {ids: 8908}})}}}let detail = {template: '#detail',created() {console.log(this);console.log(this.$route.query);console.log(this.$route.query.courseid);}}let mine = {template: '#mine',created() {console.log(this);console.log(this.$route.params.ids);}}// 2、创建路由实例const router = new VueRouter({// 3、创建映射关系routes: [// 路由的重定向{path: '/',redirect: '/index'},{path: '/index',// component: index// 命名视图components: {default: index,detail,mine}},{path: '/detail',component: detail,// 路由嵌套children: [// path路径后不能加 / {path: 'play',component: play},{path: 'study',component: study}]},{path: '/mine/:ids',name: 'my',component: mine}],// 配置 linkActiveClass: '自定义的类名'linkActiveClass: 'active'})const vm = new Vue({// 4、将路由实例挂载到vue实例上// router: router,router,el: '#app',data: {},methods: {}})</script></body>

【vue中路由的使用】