export default [
{
path: ‘/login’,
component: Login
}
]
在router.js文件 中编写入口文件代码,示例如下
推荐使用实例1的方式返回Vue Router实例,在服务端渲染的过程中,每次必须生成一个新的Vue Router,使用同一个Vue Router会导致内存溢出。客户端渲染倒是可以用同一个Vue Router,但还是推荐统一用实例1的方式返回Vue Router实例
// 引用vue-router插件
import Router from ‘vue-router’
// 使用基础路由配置
import routes from ‘./routes’
// 返回Vue Router实例1
export default () => {
return new Router({
routes
})
}
// 返回Vue Router实例2
// const router = new Router({
// routes
// })
// export default router
定义好Vue Router的入口文件之后,接下来,要在项目的入口文件(index.js)中使用
import Vue from ‘vue’
import App from ‘./app.vue’
import VueRouter from ‘vue-router’
import createRouter from ‘./config/router’
Vue.use(VueRouter)
const router = createRouter()
new Vue({
router,
render: (h) => h(App)
}).$mount(root)
Vue-router之配置
=============
详解Vue Router的入口文件router.js的配置
import Router from ‘vue-router’
import routes from ‘./routes’
export default () => {
return new Router({
routes,
// 链接可以加前缀
base: ‘/base/’,
// 链接访问方式,vue默认为hash模式,可设置为history模式
mode: ‘history’,
// 页面中使用/login设置导航
// 当前激活状态页面的对应跳转链接会有router-link-exact-active,router-link-active两个样式,可以自定义样式名称
linkActiveClass: ‘a’,
linkExactActiveClass: ‘b’,
// 页面路径跳转时,是否进行滚动行为,并且可指定滚动到什么位置
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return {x: 0, y: 0}
}
}
// 不是所有浏览器都支持前端路由方式(history模式),设置成true,vue会自动转换成hash转换方式
// 若设置成false,单页应用就变成了多页应用,每次页面跳转都会请求后端返回新的内容,比较耗时
fallback: true
// vue默认已处理了链接上的参数,以下方法可自定义转换方式
parseQuery (query) {
// 将字符串转成obj
},
stringifyQuery (obj) {
// 将obj转成字符串
}
})
}
Vue-router之路由参数传递
=================
动态路由、路由传参、懒加载、命名视图、路由命名、路由元信息、子路由、路由钩子
{
// 动态路由其实又可以叫做路由传参
path: ‘/login/:id’,
// 推荐用法props: true,实现组件中不需要写this. r o u t e . i d , . v u e 文件中写了 route.id,.vue文件中写了 route.id,.vue文件中写了route相当于耦合,避免之后vue-router升级之后写法不一样
// 如果组件中使用了$route,则不能当成一个单独的组建使用,因为会去路由上找id值,使用了props接受参数,其他组件只要通过prop传递
// 尽量使vue和$route解耦,让组件复用性更高
props: true,
// props: {id: ‘111’},
// props: (route) => ({id: route.query.id}),
component: Login,
// 懒加载,页面进入时再去加载组件,避免一开始加载所有组件(非当前组件)的js
// component: () => import(‘…/views/todo/todo.vue’), // 异步路由配置,首屏加载速度更快
// 命名视图
// 有时候想同时(同级)展示多个视图,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default。
//
//
//
// components: {
// default: Login,
// a: Sidebar,
// b: Header
// },
// 路由命名。可通过路由名称进行路由跳转/app
name: ‘app’,
// 路由元信息,保存路由中的信息 在写HTML页面时,可以在head标签中定义meta,mate即页面源信息,这些信息有利于seo处理。而在vue组件中很难写这东西
meta: {
title: ‘this is app’,
description: ‘description’
},
// 子路由
children: []
// 路由钩子
// beforeEnter (to, from, next) {
// console.log(‘app route before enter’)
// next()
// }
}
在使用懒加载时,需要安装对应插件
npm i babel-plugin-syntax-dynamic-import -D
安装完成,修改.babelsrc
Vue-router之导航守卫
===============
vue-router中的导航钩子按定义位置不同(执行时机也不同)分为全局钩子、路由级钩子和组件级钩子。
在项目入口文件(index.js)中的路由守卫,全局钩子
import Vue from ‘vue’
import App from ‘./app.vue’
import VueRouter from ‘vue-router’
import createRouter from ‘./config/router’
React
-
介绍一下react
-
React单项数据流
-
react生命周期函数和react组件的生命周期
-
react和Vue的原理,区别,亮点,作用
-
reactJs的组件交流
-
有了解过react的虚拟DOM吗,虚拟DOM是怎么对比的呢
-
项目里用到了react,为什么要选择react,react有哪些好处
-
怎么获取真正的dom
-
选择react的原因
-
react的生命周期函数
-
setState之后的流程
-
react高阶组件知道吗?
-
React的jsx,函数式编程
-
react的组件是通过什么去判断是否刷新的
-
如何配置React-Router
-
路由的动态加载模块
-
Redux中间件是什么东西,接受几个参数
-
redux请求中间件如何处理并发