.vue 文件大写 Home.vue
name: ‘Home’ 与之对应
懒加载也大写 const Home
component : Home 也大写
只有path:’/home’ 小写运行指令为 : npm run dev
一、前端路由的核心
改变URL,但是页面不进行整体的刷新
- vue-router 基于路由和组件的
- vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用
二、前端路由的基本使用
-
使用vue-router的步骤:
第一步: 创建路由组件
第二步: 配置路由映射: 组件和路径映射关系
第三步: 使用路由: 通过<router-link>
和<router-view>
-
router-link 在App.vue 里面使用
该标签是一个vue-router中已经内置的组件, 它会被渲染成一个<a>
标签
tag: tag
可以指定<router-link>
之后渲染成什么组件, 比如上面的代码会被渲染成一个<li>
元素, 而不是<a>
<router-link to='/home' tag='li'>
replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称
-
router-view 占位 在App.vue 里面使用
该标签会根据当前的路径, 动态渲染出不同的组件在路由切换时, 切换的是挂载的组件, 其他内容不会发生改变
三、相关细节处理
-
默认路径
{ // 设置默认路径 path: "", redirect: "home" },
-
HTML5的History模式
默认情况下, 路径的改变使用的URL的hash 带有 ‘’#“号
在router实例里面修改:mode: "history"
// 创建路由实例对象 const router = new Router({ routes, // 将地址栏上的 # 去掉 默认情况是 hash 模式 mode: "history" });
-
改变URL ,但是页面不刷新的几种方法:
-
location.hash
-
HTML5的history模式:history.pushState()
-
HTML5的history模式:history.replaceState() 不可以返回
-
HTML5的history模式:
history.back() 等价于 history.go(-1)
history.forward() 则等价于 history.go(1)
-
-
路由代码跳转
-
上面用的 是一种跳转方式
有时候,页面的跳转可能需要执行对应的JavaScript代码
this.$router.push('/home').catch(err=>{err}) Vue-router 给所有组件加了一个 $router 属性
-
四、动态路由
在某些情况下,一个页面的path路径可能是不确定的,比如我们进入用户界面时,希望是如下的路径:
-
/user/aaaa或/user/bbbb
-
除了有前面的/user之外,后面还跟上了用户的ID
-
这种path和Component的匹配关系,我们称之为动态路由(也是路由传递数据的一种方式
-
使用 $route.params 使用 v-bind 绑定属性
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
{ path: "/user/:userID", name: "user", component: User }
-
$route为当前router跳转对象里面可以获取name、path、query、params等
-
在组件中使用
$route
会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。
使用props
将组件和路由解耦
五、Vue-router 路由懒加载
-
路由懒加载的作用
路由懒加载的主要作用就是:将路由对应的组件打包成一个个的js代码块只有在这个路由被访问到的时候, 才加载对应的组件
-
懒加载的方式
const Home = () => import('../components/Home.vue') 采用 es6 的方法 简洁
六、Vue-router 嵌套路由
-
什么是嵌套路由
比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容.
一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件 -
实现嵌套路由的步骤
-
创建对应的子组件, 并且在路由映射中配置对应的子路由 children.
-
在你需要嵌套的组件内部使用标签
例如你想要在home组件内嵌套俩个路由,那么在home组件里要使用标签
-
要在嵌套的出口中渲染组件,需要在
VueRouter
的参数中使用children
配置: -
index.js 配置对应的子路由
5. 父路由组件里面代码书写:
6. 也可以添加跳转的<router-link>
const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ // 当 /user/:id 匹配成功, // UserHome 会被渲染在 User 的 <router-view> 中 { path: '', component: UserHome } // ...其他子路由 ] } ] })
-
-
简述嵌套路由的过程
-
先创建三个组件(parent,children1,children2,均为.vue 文件)
-
在router 文件夹下的 index.js routes 配置相关路由,其中在需要嵌套的地方添加children 属性
{path:'/parent',component:parent} {path:'parent',component:parent, children:[{ path:'children1',component:Children },{ path:'children1',component:Children },] }
-
添加完路由组件映射关系后,去parent.vue 里面使用该俩路由
<router-link to="/parent/children1">子路由1</router-link> <router-link to="/parent/children2">子路由2</router-link> <router-view></router-view>
-
嵌套默认路径显示
{ path: "", redirect: "childen1" }
-
七、Vue-router 传递参数
简述一下传参的流程:
传参传参是谁给谁传?
App.vue 传递参数给 改变路由后的组件传: 比如我从首页跳到个人 首页传递相应的信息给个人。传参传参怎么传?
传参有俩个参数类型 params 和 query,App.vue 根据这个传组件如何接收由其他组件传来的值?
通过 r o u t e . p a r a m s ( ) 和 route.params() 和 route.params()和route.query() 方法那你怎么知道是给你传的?
设置路由映射关系 path: /router/:id
大致就为:在组件1跳转到组件2时,组件2需要一些参数,这些参数由组件1传递(组件1一般就为App.vue组件),组件1写好需要传递的东西后,组件2再写接收参数的代码。
需要注意组件1跳转传参时需要指明path(及向谁传递参数)
-
传递参数的类型
-
params的类型:
配置路由格式:path: /router/:id
传递的方式: 在path后面跟上对应的值(在router-link里面设置对应id的值)
传递后形成的路径: /router/123, /router/abc
-
query的类型
配置路由格式: /router, 也就是普通配置
传递的方式: 对象中使用query的key作为传递方式
传递后形成的路径: /router?id=123, /router?id=abc
-
-
传递参数的方式
-
<router-link> App.vue
设置<router-link :to="{path: '/profile/'+123,
在profile 组件中接收参数 并显示到页面上 <span>param类型:{{$route.params.id}}</span> <span>query类型:{{$route.query}}</span>
-
JavaScript 代码传参 App.vue 写
<button @click="toProfile">个人档案</button>
toProfile(){ // 使用 $router.push() this.$router.push({ path: '/profile/' + 456, query:{name:'戴书成',age:'18'} }) } 在profile 组件中接收参数 并显示到页面上 <span>param类型:{{$route.params.id}}</span> <span>query类型:{{$route.query}}</span>
-
获取参数 通过 $route
$route.params$route.query
-
八、Vue-router 导航守卫(改变网页的标题)
使用场景:在一个SPA应用中, 改变网页的标题
-
什么是导航守卫
vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.
vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发
-
普通修改方式
我们比较容易想到的修改标题的位置是每一个路由对应的组件.vue文件中
比如在home.vue组件里面添加created 函数
// 创建组件之后回调,这里可以设置组件的标题 created() { document.title='首页' }
注:
但是当页面比较多时, 这种方式不容易维护(因为需要在多个页面执行类似的代码).
-
导航守卫的使用 (使用hook钩子,beforeEach全局守卫前置钩子)
-
首先在router–> index.js --> routes --> 在组件路由的映射关系中加上 meta 属性 设置标题
{ path: "/home", component: home, meta: { title: "首页" }
-
在 index.js 里面使用导航守卫 这里的beforeEach 为全局前置导航守卫
router.beforeEach((to, from, next) => { // to: 即将要进入的目标的路由对象. // from: 当前导航即将要离开的路由对象. // next: 调用该方法后, 才能进入下一个钩子 window.document.title = to.meta.title; next(); });
-
九、keep-alive
-
什么是keep-alive?
Vue内置的一个组件, 主要用于保留组件状态或避免重新渲染
它自身不会渲染一个DOM元素,也不会出现在父组件链中
需要嵌套一个 router-view 来占位
-
用法
当组件在 内被切换时,它的mounted
和unmounted
生命周期钩子不会被调用,取而代之的是activated
(激活) 和deactivated
(注销) -
keep-alive 组件的俩个属性
include - 字符串或正则表达,只有匹配的组件会被缓存
exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存