テーマ: 凝縮夜紫
ハイライト: a11y-dark
仲間ノート作成活動「第5期青少年合宿」に参加して2日目です。
vueルーター
現在、3 つの人気のあるフロントエンド フレームワークはすべて、独自のルーティング実装を備えています。 Angular の ngRouter React の ReactRouter Vue の vue-router
Vue-router は Vue.js の公式ルーティング プラグインで、vue.js と深く統合されており、シングルページ アプリケーションの構築に適しています。公式 Web サイトにアクセスして学習することができます: https://router.vuejs.org/zh/
Vue-router はルーティングとコンポーネント ルーティングに基づいてアクセス パスを設定し、そのパスをコンポーネントにマッピングします。vue-router のシングルページ アプリケーションでは、ページのパスの変更がコンポーネントの切り替えになります。
インストール
ステップ 1: vue-router をインストールする
npm install vue-router --save
ステップ 2: モジュラー プロジェクトで使用する (プラグインであるため、Vue.use() を通じてルーティング関数をインストールできます)
第一步：导入路由对象，并且调用 Vue.use(VueRouter)
第二步：创建路由实例，并且传入路由映射配置
第三步：在Vue实例中挂载创建的路由实例```js ------------src/router/index.js // ルーティング関連情報を設定 import Vue from 'vue' import VueRouter from 'vue-router'
// 1. Vue.use(plugin) 経由でプラグイン Vue.use(VueRouter) をインストールします
// VueRouter オブジェクトを作成します const Router = [ // ルートとコンポーネント間のマッピング関係を設定します] const router = new VueRouter({ Router })
// 3. VueRouter オブジェクトを vue インスタンスのエクスポート デフォルト ルーターに渡します
------------main.js で、vue インスタンスへのルートをマウントします。インポート ルーターから './router' // import
new Vue({ el: '#app', router, render: h => h(App) })
「」
vue-router を使用する手順:
第一步: 创建路由组件
第二步: 配置路由映射: 组件和路径映射关系
第三步: 使用路由: 通过<router-link>和<router-view><router-link>: vue-router に自動的に登録されたグローバル コンポーネントはどこでも使用でき、最終的にはタグにレンダリングされます。 :<router-view>レンダリングされたコンポーネントが表示される場所、およびコンポーネントがレンダリングおよび置換される場所を決定するために使用されます
views フォルダーはルーティング コンポーネントが配置される場所ですが、管理を容易にするために他のコンポーネントはルーティング コンポーネントから分離されています。
```js // 配置路由映射 import Home from '../components/Home.vue' import About from '../components/About.vue' const Routes = [ {
path : '/home',Component : Home }, { パス : '/about'、コンポーネント : About } ]
// ルーティングを使用する
<router-link>: このタグは vue-router の組み込みコンポーネントであり、タグとしてレンダリングされます<a>。<router-view>: このタグは、現在のパスに従ってさまざまなコンポーネントを動的にレンダリングします。
Web ページのその他のコンテンツ (上部のタイトル/ナビゲーション、下部の一部の著作権情報など) は同じレベルになります。ルーティングが切り替わると、実装されているコンポーネントが切り替わり、その他のコンテンツは変わりませ<router-view>ん<router-view>。 。
問題が発生しました: Uncaught ReferenceError: Home が定義されていません 解決策: Home.vue では、home が引用符で囲まれていませんjs export default { name : "Home" };
ルーティングのデフォルト
默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容.但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以.
如何让路径默认跳转到首页, 并且<router-view>渲染首页组件呢? 只需要配置多配置一个映射就可以了 js { path : '/', redirect : '/home' }, 配置解析: 在routes中又配置了一个映射. path配置的是根路径: / redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.
修改为history模式
我们前面说过改变路径的方式有两种: URL的hash HTML5的history 默认情况下, 路径的改变使用的URL的hash url会有#，不美观，而history没有# 如果希望使用HTML5的history模式, 进行如下配置即可: js const router = new VueRouter({ routes, mode : 'history' })
在hash下，使用history.back()时，地址栏会有#，http://localhost:8080/test#/ 而在history模式下，地址栏为http://localhost:8080/test
<router-link>的其他属性
在前面的<router-link>中, 我们只是使用了一个属性: to, 用于指定跳转的路径.
<router-link>还有一些其他属性:
tag: tag可以指定<router-link>之后渲染成什么组件, 比如<router-link to="/home" tag="li">代码会被渲染成一个<li>元素, 而不是<a>
replace: replace不会留下history记录, 在指定replace的情况下, 后退键不能返回到上一个页面中
active-class: 当<router-link>对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称 在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类. 但是通常不会修改类的属性, 会直接使用默认的router-link-active即可.
replace 没有快捷方式，只能在link里自己写 但active-class可以快捷改， js // 在路由里改 const router = new VueRouter({ routes, mode : 'history', linkActiveClass : 'active' })
exact-active-class 类似于active-class, 只是在精准匹配下才会出现的class. 后面看到嵌套路由时, 我们再看下这个属性.
路由代码跳转
有时候我们不想要用<router-link>，而是自己写 有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了 所有路由都是通过vue-router来处理
vue-router源码中给所有组件中都加了$router属性, 就是index里const的router对象 两种解决办法， 法一： 链接后面加时间戳， 法二：判断当前路径和你想要跳转的路基是否一样，如何一样，就不跳转了 js export default { name: "App", methods : { homeClick () { this.$router.push('/home') // this.$router.replace('/home') // 上面的代码如果多次点击同一个按钮，会报错 // if(this.$router.options.routes[1].path!='/home'){ // this.$router.replace('/home') // console.log('1'); // } // console.log('homeClick'); }, aboutClick (){ this.$router.push('/about') // this.$router.replace('/about') // 上面的代码如果多次点击同一个按钮，会报错 // if(this.$router.options.routes[1].path!='/about'){ // this.$router.replace('/about') // console.log('2'); // } // console.log('aboutClick'); } } }
动态路由
在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径： /user/aaaa或/user/bbbb 除了有前面的/user之外，后面还跟上了用户的ID 这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。
新建user组件 配置router的index文件，引入组件，配置routes path : '/user/:userId', 在app.vue中，
1. 利用v-bind 动态绑定 <router-link v-bind:to="'/user/' + userId">用户</router-link> 2. 想要在user组件中显示路由中的userId：$route $route: 当前哪个路由处于活跃状态(当前显示(使用)的组件)，就获取哪个路由 <h3>用户信息：{
{$route.params.userId}}</h3>
route(routes[])-->route($route) routes[]路由数组，相当于家里的路由器，里面每一个值(route)，相当于连接的每一台设备(每个人的手机、电脑、电视等) -->