什么是前端路由？
路由是根据不同的url地址展示不同的内容或页面
前端路由大致可分为4类
- 动态路由匹配
- 嵌套路由
- 编程式路由
- 命名路由和命名视图
-
动态路由匹配
如：
/goods/:goodsId动态路由，必须要输入goods开始，后面加一个动态的数字或字符串// router/index.js文件 export default new Router({ mode: 'history', /* 指定路由模式， history模式在url中是没有#号的，只有hash模式才有 */ routes: [ { path: '/goods/:goodsId', /* 动态路由模式 */ name: 'Goods', component: Goods } ] }) // 访问时可以输入 localhost:8080/goods/156<!-- GoodsList.vue文件 --> <template> <div> <p>{{ lists }}</p> <p>{{ lists }}</p> <p>{{ lists }}</p> <p>id = {{ $route.params.goodsId }}</p> <!--可以拿到动态的id--> </div> </template> <script> export default { data () { return { lists: '我是商品列表' } } } </script> <style></style>
-
嵌套路由
嵌套路由就是在一个页面中有多个路由链接，可以切换到不同的页面或内容而无需刷新(路由嵌路由).
下面的案例中在商品列表中嵌套了两个子路由
- 通过
http://localhost:8080/goods/image访问图片 - 通过
http://localhost:8080/goods/title访问标题
<!-- GoodsList.vue --> <template> <div> <p>{{ lists }}</p> <!-- to到达的地址一定要写绝对地址,包括上一级goods地址 --> <router-link to="/goods/image">图片</router-link> <router-link to="/goods/title">标题</router-link> <div> <router-view></router-view> </div> </div> </template> <script> export default { data () { return { lists: '商品列表' } } } </script> <style></style><!-- Image.vue --> <template> <div> <p>{{ img }}</p> </div> </template> <script> export default { data () { return { img: '我是商品图片' } } } </script> <style></style><!-- Title.vue --> <template> <div> <p>{{ title }}</p> </div> </template> <script> export default { data () { return { title: '我是标题标题' } } } </script> <style></style><!-- /router/index.js文件 --> import Vue from 'vue' import Router from 'vue-router' import Goods from '@/views/GoodsList' import Img from '@/views/Image' import Tit from '@/views/Title' // 如果在一个模块化工程中使用vue-router，必须要通过 Vue.use() 明确地安装路由功能 Vue.use(Router) export default new Router({ mode: 'hash', /*有#号， 默认就是这种方式*/ routes: [ { path: '/goods', name: 'Goods', component: Goods, /** * 1.使用children属性指定子路由 * 2.在children里面的path中不能出现绝对路径符合/ * 3.{ path: '/title', component: Tit }中 path 的值多了斜杠，是错误的写法 */ children: [ { path: 'image', name: Img, component: Img }, { path: 'title', component: Tit } ] } ] })
- 通过
-
编程式路由
通过js来实现页面的跳转，目前有3种方法可以实现跳转
$router.push.('name'); $router.push.({path:'name'}); $router.push.({path:'name?id=123'})或$router.push.({path:'name', query:{a:123}});
-
命名路由和命名视图
给路由定义不同的名字，根据名字进行匹配
给不同的router-view定义名字，通过名字进行对应组件的渲染
<!-- App.vue --> <template> <div id="app"> <img src="./assets/logo.png"> <!-- 这个 router-view 是装载一级路由的 --> <!-- 该方式很少使用，相当于将该组件划分为三部分，其实可以在GoodsList中通过样式划分区域 --> <router-view></router-view> <router-view name="tit"></router-view> <router-view name="img"></router-view> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style><!-- /router/index.js文件 --> import Vue from 'vue' import Router from 'vue-router' import Goods from '@/views/GoodsList' import Img from '@/views/Image' import Tit from '@/views/Title' // 如果在一个模块化工程中使用vue-router，必须要通过 Vue.use() 明确地安装路由功能 Vue.use(Router) export default new Router({ mode: 'hash', /*有#号， 默认就是这种方式*/ routes: [ { path: '/', name: 'GoodsList', components: { default: GoodsList, tit: Tit, img: Img } } ] })
什么是后台路由？
浏览器在地址栏中切换不同的url时，每次都向后台服务器发出请求，服务器响应请求，在后台拼接html文件传给前端显示, 返回不同的页面,意味着浏览器会刷新页面，网速慢的话说不定屏幕全白再有新内容。后端路由的另外一个极大的问题就是 前后端不分离。
路由的模式
路由的模式有两种
- mode: 'history'
- mode: 'hash' 会有一个#号出现在url中
// router/index.js文件中指定路由模式
import Vue from 'vue'
import Router from 'vue-router'
import List from '@/components/List' /*@指的是src根目录*/
// 如果在一个模块化工程中使用vue-router，必须要通过 Vue.use() 明确地安装路由功能
Vue.use(Router)
export default new Router({
mode: 'hash', /* 指定路由模式 */
routes: [
{
path: '/',
name: 'lists',
component: List
}
]
})
history
js中有一个全局的对象
history记录着用户的操作历史，history.length记录着已经操作了多少步其实
vue-router就是对history的一个封装
- 当前页面刷新
history.go(0) - 前进一页
history.go(1) - 后退一页
history.go(-1) - 当前页面刷新
history.back(0) - 后台一页
history.back(1) - 改变页面
history.pushState(描述，标题，地址)
注意点1：在template中的错误
在任何的
.vue文件，template模板中只能有一个根元素，如果出现两个或两个以上的根元素都会出现语法错误
-
错误的写法
<template> <!-- 出现两个根元素会有语法错误 --> <p>使用双大括号渲染内容：{{message}} </p> <p>使用v-html指令渲染内容：<span v-html="message"></span></p> </template> <script> export default { data () { return { message: '<span style="color: green">我是span里面的内容</span>' } } } </script> <style> </style>
-
正确的写法
<template> <div id='test'> <p>使用双大括号渲染内容：{{message}} </p> <p>使用v-html指令渲染内容：<span v-html="message"></span></p> </div> </template> <script> export default { data () { return { message: '<span style="color: green">我是span里面的内容</span>' } } } </script> <style> </style>
注意点2：引入组件/注册组件/使用组件
<!-- App.vue是应用程序页面入口 -->
<template>
<div id="app">
<router-view/>
<!-- 3.使用组件 -->
<Counter></Counter>
</div>
</template>
<script>
// 1.引入Counter.vue组件
import Counter from './components/Counter.vue';
export default {
name: 'App',
components: {
// 2.注册组件
Counter
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 20px;
}
</style>
注意点3：路由中的传参区别
要注意一个问题。router跟route有所不同。router是路由对象，所有在js中使用的路由对象
route是单个路由对象。
-
动态路由的传参：通过
$route.params.goodrId属性拿到值routes: [ { path: '/goods/:goodsId', /*动态路由可以通过$route.params.goodrId拿到goodsId的值*/ name: 'Goods', component: Goods } ]
-
通过问号传参:
// 在methods里面调用某个方法，方法里面调用页面跳转 this.$router.push({path:'/car?goodrId=123'}); // 使用 $route.query.goodsId可以拿到goodsId的值
vue注意事项
- Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器
- 在引入vue时必须要在head标签里面引入，不能在body标签结束前引入，这样可以避免出现抖屏的现象。
- 使用
npm run build命令可以生成成产环境的代码，即浏览器支持的代码，会在根目录中生成一个dist文件夹，里面就是生成环境所使用的代码。
vue-router注意事项
在浏览器的地址栏中可以看到url有#号是怎么回事？
原因是在路由设置时有两种表示方式：第一种是history，第二种是hash。如果是使用hash表示法就会在url中显示#号。
