VUE学习笔记—路由

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1、前端渲染与后端渲染

后端渲染：后端生成html+css直接传输到前端进行展示(没有js)。

前端渲染：浏览器中显示的大部分内容都是由前端写的js代码在浏览器执行，最终渲染出来的页面；

后端路由：后端处理url跟页面之间的映射关系，比如spring mvc，这种处理方式被称作后端路由；

前端路由：

  • 前后端分离阶段：后端只负责提供数据，不负责任何页面的内容，前端依赖ajax技术，获取数据进行渲染；

  • SPA阶段：前端在前后端分离的基础上，加了一套路由处理机制；

其实，不考虑路由，jquery的$.load(url)也可以认为是SPA应用。因为这个也可以将所有资源(html,css,js)汇集到一起，然后页面直接请求该url进行局部刷新。

2、url的hash跟H5的history

修改location.href可以对页面进行刷新，而修改location.hash则可以修改地址栏的url而不刷新页面。

history对象有许多方法，比较重要的有pushState，back，go，forward及replaceState；

pushState跟replaceState的都可以修改url，区别是前者为压栈操作，可以回退，后者不可以。

go的参数为数字，可以指定前进后退的步数。forward跟back则分别为单步的前进后退。

3、vue-router基本使用

vue-router跟vue是深度绑定的，主要作用就是将url跟组件映射起来。

使用步骤：

1、安装

npm install vue-router --save

2、配置

在/router/index.js中配置

import VueRouter from 'vue-router'   
import Vue from 'vue'   
Vue.use(VueRouter)   
const routes = []    
const router = new VueRouter({routes})   
export default router

3、在main.js导入

import Vue from 'vue'   
import App from './App'   
import router from './router/index.js'   
new Vue({   
    el:'#app',   
    router,   
    render: h=>h(App)    
})

4、使用路由，通过 跟

router-link用于导航菜单，默认渲染为，router-view用于内容占位。

注意，tag，replace, active 等属性的使用。

当然，router-link也可以替换为其它标签，然后使用事件响应，调用$router.pushState()等方法来使用。

4、懒加载

当app较大的时候，页面一次性加载一个很大的js文件是非常费时的，根据路由进行处理的懒加载将很好的解决这一问题。

es6中懒加载的写法：

//原代码
import Home from '../components/Home'
//懒加载写法
const Home = () => import('../components/Home.vue')

5、路由嵌套

步骤：

a、创建对于的子组件，并且在路由映射中配置对于的子路由；

b、在组建内部使用标签；

主要代码示例：

{
    path: '/home',
    component: Home,
    children: [
        {
            path: 'news',   //注意子路由path没有斜杠,配router-link的时候，但还是要斜杠的
            component: HomeNews
        },{
            path: 'message',
            component: HomeMessage
        }
    ]
}

6、路由传值

主要有两种方式：params跟query

params的处理：

a、配置路由格式：/router/:id ； //路由js文件

b、传递的方式，在path后跟上对应的值； //router-link

c、通过$route.params.id进行获取；

最终生成的路径：/router/123

query方式：

a、配置路由格式router

b、router-link用:to="{path:'/profile', query:{'a':123,'b': 456}}"

c、通过$route.query进行获取

最终胜出的路径：/profile?a=123&b=456

可以发现，两者在最终生成的url上是不一样的；前者作为url的一部分，后者为url中queryParam的一部分(也是属于url的)；

$route跟$router的区别：

$router为VueRouter实例，想要导航到不同的URL，可使用$router.push方法；

$route为当期router跳转对象，可以获取name、path、query、params等属性；

7、导航守卫

有了路由之后，终于可以在不同页面之间进行自由切换了。有时候可能有些需求，想要在切换之间做些什么，比如切换的同时，更改页面的title，这就要用到导航守卫。

所谓导航守卫，完全是方法名直译。

router.beforeEach()方法接受的参数也是一个函数，这个函数的名字在源码中叫做NavigationGuard，有三个参数(from, to, next),from跟to分别代表跳转前后的route对象，next为跳转流程函数，记着在beforeEach()一定要执行即可，不执行会导致跳转终止。so，该需求可以这么写：

router.beforeEach(function (from, to, next){
    document.title = to.matched[0].meta.title;
    next();
})

以上代码中的meta是在路由中配置的，matched数组的第一个元素是目标路由对象；直接调用to对象的meta对象，有时会导致嵌套路由无法获取到meta对象(嵌套路由)；

其他还有路由独享守卫、组件守卫等，参数跟用法相同；

8、keep-alive

keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

keep-alive有两个重要属性：

include：字符串或者正则，匹配的组件会被缓存；

exclude：字符串或正则，匹配的组件不会被缓存；

router-view也是一个组件，如果直接被包在keep-alive里边，所有路径匹配到的视图组件都会被缓存；

以上是 VUE学习笔记—路由 的全部内容， 来源链接： utcz.com/z/378441.html

回到顶部