vue_路由Router

使用路由

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌

  • 安装

    1. vue项目创建时选择使用路由,项目将自动在根实例中注册 router 选项,

      该 router 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$router 访问到

    2. 假设vue项目创建没有选择使用路由,手动将路由注册到根实例中
      • $ npm install vue-router --save
      • 手动创建目录 src/router/index.js
  • 使用路由(项目初始化选择使用路由后将自动生成下列代码)
import Vue from ‘vue‘
import Router from ‘vue-router‘
import Home from ‘@pages/home/Home‘
Vue.use(Router)
export default new Router({
  routes: [{
   path: ‘/‘,
   name: ‘Home‘,
   component: Home
  }]
})
// 注册到根实例 // main.js
import router from ‘./router‘
new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘
})

前端路由优缺点

优点

用户体验好,不需要每次都从服务器全部获取,快速展现给用户

缺点

不利于SEO

使用浏览器前进,后退的时候会从新发送请求,没有合理的利用缓存

单页面无法记住之前滚动的位置,无法在前进,后退的时候记住滚动的位置

动态路由匹配,注意是route不是router

模式 匹配路径 this.$route.params
/goods/:goodsId /goods/0001 { goodsId: ‘0001‘ }
/goods/:goodsId/user/:name /goods/0001/user/iphone { goodsId: ‘0001‘, name: ‘iphone‘ }

嵌套路由

// router/index.js
routes: [{
  path: ‘/user/:id‘,
  component: User,
  children: [{
    // 当 /user/:id/profile 匹配成功,
    // UserProfile 会被渲染在 User 组件的 <router-view> 中
    path: ‘profile‘, // 注意不要加斜杠/profile,加了斜杠就是根路由
    component: UserProfile
  }, {
    // 当 /user/:id/posts 匹配成功
    // UserPosts 会被渲染在 User 组件的 <router-view> 中
    path: ‘posts‘,
    component: UserPosts
  }]
}]

<router-link to="/user/001/profile">跳转</router-link>

编程式路由

编程路由就是通过js来实现页面的跳转

this.$router.push(params)

this.$router.replace(params)

router.replace唯一的不同就是,它不会向history添加新记录, 替换掉当前的history记录。也就是没有前进后退功能

params: 可以是字符串,对象和参数传递

注意: 这里获取使用的是this.route.query(url地址问号拼接的参数)和获取的动态路由.params(动态参数)不同

params 跳转路径 this.$route.query this.$route.params
‘/home‘ /home
{path: ‘/home‘} /home
{path: ‘/home?user=jack‘} /home?user=jack {user: ‘jack‘}
{path: ‘/home‘,query:{user:‘jack‘,pass:‘1234‘}} /home?user=jack&pass=1234 {user:‘jack‘,pass:‘1234‘}
{name: ‘user‘, params: {userId: ‘123‘}} /user/123 {userId:‘123‘}
{path: ‘/user?count=10‘, params: { userId: ‘123‘ }} /user?count=10 {count: 10}

注意:name是路由配置里面的name的值(命名路由),如果提供了 path,params 会被忽略,

router.go(n)

这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步

操作 History

router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像,实际上它们确实是效仿 window.history API 的

命名路由

routes: [{
  path:‘/user/:userId‘,
  name: ‘user‘,
  component: User
}]
// 要链接到一个命名路由,可以给router-link的to属性传一个对象:
<router-link :to="{ name: ‘user‘, params: { userId: 123 }}">User</router-link>
// 和编程式路由调用一样router.push({ name: ‘user‘, params: { userId: 123 }})

命名视图

使用场景:有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局

<router-view class="view one"></router-view>
<router-view class="view two" name="sidebar"></router-view>
<router-view class="view three" name="main"></router-view>
// 路由配置
routes: [{
  path: ‘/‘,
  components: {
    default: Foo, // 没有给name属性的router-view默认渲染视图
    sidebar,
    main
  }
}]

vue router-link 渲染a标签的问题 tag属性

vue默认跳转router-link使用a标签渲染,当我们不想使用a标签渲染时,又想使用跳转功能可以使用tag属性,来代替a标签渲染,例如:

<ul>
  // 页面最终会以li标签渲染,
  <router-link tag="li" to="/">列表1</router-link>
</ul>

路由懒加载

当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

// router 配置
routes: [{
  path: ‘/user‘,
  name: ‘user‘,
  component: () => import(‘./my-async-component‘)
}]
// 全局组件配置
Vue.component(‘async-component‘, () => import(‘./my-async-component‘)))
// 局部组件配置
export default {
  // ....
  components: {
    ‘async-component‘: () => import(‘./my-async-component‘)
  }
}

更多路由配置查看

原文地址:https://www.cnblogs.com/JunLan/p/12687254.html

时间: 2024-10-01 22:20:03

vue_路由Router的相关文章

Android业务组件化之子模块SubModule的拆分以及它们之间的路由Router实现

前言: 前面分析了APP的现状以及业务组件化的一些探讨(Android业务组件化之现状分析与探讨),以及通信的桥梁Schema的使用(Android业务组件化之URL Schema使用),今天重点来聊下子模块SubModule的拆分以及它们之间的路由Router实现.本篇涉及的相关知识比较多,阅读本篇之间需要大致了解一下Java的注解(Java学习之注解Annotation实现原理).Java的动态代理机制(Java设计模式之代理模式(Proxy))等.业务组件化是一个循序渐进的过程,一开始很难

node_egg路由Router

路由(Router) 框架约定了app/router.js文件用于统一所有路由规则. Router 主要用来描述请求URL和具体承担执行动作的 Controller 的对应关系 定义路由(Router) // app/router.js 里面定义 URL 路由规则 module.exports = app => { const { router, controller } = app; router.get('/user/:id', controller.user.info); // 动态路由传

angular 路由router的用法总结

1,html页面 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, 

docker的cli的路由router

写过应用框架的都应该知道有个路由模块,来看看docker的http请求是怎么路由的 docker的server.go文件中,首先入口是New的时候 func New(cfg *Config) *Server {         //需要创建Server的实例,因为命令的具体执行都是Server对象的函数   srv := &Server{ cfg:   cfg, start: make(chan struct{}), } //这里就是创建Router的操作 r := createRouter(s

6.1 路由router

路由将信息由源地址传递到目的地的一种角色. 一.路由简单应用举个例子: let express=require('express'); let app=express(); app.use(express.static('public')); // GET /home 显示 网站首页 app.get('/home',function(req,res){ res.setHeader('content-type','text/html;charset=utf-8'); res.end('网站首页')

vue路由-router

VueRouter基础 vue路由的注册 导入 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> # 可以是下载之后的 <script src="vue.min.js"></script> <script src="vue-router.js"></script> 定义一个匹配规则对

Vue的路由Router之导航钩子和元数据及匹配

一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接  https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js 复制粘贴页面的所有内容 四.index.html 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4

Vue:路由router的一些用法

Vue-router的引入 分为两种方式: 1.通过npm 引入vue-router库 npm install vue-router 在模块中通过下面的方法使用 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 2.直接通过script标签引入vue-router.js文件 如果是通过script标签引入,则直接使用即可. 下载地址 router的使用 var routes = [ { path

路由Router

基本使用 from booktest import views # 1. 创建Router对象 from rest_framework.routers import SimpleRouter router = SimpleRouter() # 2. 注册视图集 router.register('books', views.BookInfoViewSet, base_name='books') # 3. 打印生成的url配置项 for url in router.urls: print(url)