ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue学习06——router动态路由01

2022-05-12 17:33:01  阅读:170  来源: 互联网

标签:vue 06 Bar 01 path routes router 路由 const


vue路由vue-router

在Web开发中,路由是指根据URL分配到对应的处理程序。对于大多数单页面应用,都推荐使用官方支持的vue-router。

Vue-router通过管理URL,实现URL和组件的对应,以及通过URL进行组件之间的切换。本文将详细介绍Vue路由vue-router

安装

  在使用vue-router之前,首先需要安装该插件

npm install vue-router

如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

  如果使用全局的 script 标签,则无须如此

使用

  用Vue.js + vue-router创建单页应用非常简单。使用Vue.js ,已经可以通过组合组件来组成应用程序,把vue-router添加进来,需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们

  下面是一个实例

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航,通过传入 `to` 属性指定链接,<router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口,路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)

// 1. 定义(路由)组件,可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器,或者,只是一个组件配置对象。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例,然后传 `routes` 配置,当然还可以传别的配置参数
const router = new VueRouter({
  routes // (缩写)相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 通过 router 配置参数注入路由,从而让整个应用都有路由功能
const app = new Vue({
  el:'#app',
  router
})</script>

Hello App!

Go to Foo Go to Bar

路由模式

  vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载

http://localhost:8080/#/Hello

  如果不想要很丑的 hash,可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

  当使用 history 模式时,URL 就像正常的 url

http://localhost:8080/Hello

  不过这种模式需要后台配置支持。如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404

【服务器配置】

  如果要使用history模式,则需要进行服务器配置

  所以,要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是app 依赖的页面

  下面是一些配置的例子

apache

  以wamp为例,需要对httpd.conf配置文件进行修改

  首先,去掉rewrite_module前面的#号注释

LoadModule rewrite_module modules/mod_rewrite.so

  然后,将文档所有的AllowOverride设置为all

AllowOverride all

  最后,需要保存一个.htaccess文件放置在根路径下面,文件内容如下

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

nginx

location / {
  try_files $uri $uri/ /index.html;
}

【注意事项】

  这么做以后,服务器就不再返回404错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,应该在Vue应用里面覆盖所有的路由情况,然后再给出一个404页面

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

  或者,如果是用 Node.js 作后台,可以使用服务端的路由来匹配 URL,当没有匹配到路由的时候返回 404,从而实现 fallback

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const NotFound = {template:'<div>not found</div>'}

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '*', component: NotFound},
]

Go to Foo Go to Bar 不存在的链接

not found

 重定向和别名

【重定向】

  重定向通过 routes 配置来完成,下面例子是从 /a 重定向到 /b

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

  重定向的目标也可以是一个命名的路由:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

  甚至是一个方法,动态返回重定向目标:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
return '/home' }} ] })

  对于不识别的URL地址来说,常常使用重定向功能,将页面定向到首页显示

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '*', redirect: "/foo"},
]

Go to Foo Go to Bar 不存在的链接

foo

【别名】

  重定向是指,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,那么别名是什么呢?/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样

  上面对应的路由配置为

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

  『别名』的功能可以自由地将 UI 结构映射到任意的 URL,而不是受限于配置的嵌套路由结构

   处理首页访问时,常常将index设置为别名,比如将'/home'的别名设置为'/index'。但是,要注意的是,<router-link to="/home">的样式在URL为/index时并不会显示。因为,router-link只识别出了home,而无法识别index

 

根路径

  设置根路径,需要将path设置为'/'

  <p>
    <router-link to="/">index</router-link>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>

const routes = [
  { path: '/', component: Home },
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
]

index Go to Foo Go to Bar

但是,由于默认使用的是全包含匹配,即'/foo'、'/bar'也可以匹配到'/',如果需要精确匹配,仅仅匹配'/',则需要在router-link中设置exact属性

  <p>
    <router-link to="/" exact>index</router-link>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>

const routes = [
  { path: '/', component: Home },
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
]

index Go to Foo Go to Bar

 

搜索

复制

标签:vue,06,Bar,01,path,routes,router,路由,const
来源: https://www.cnblogs.com/fedrgd/p/16263369.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有