ホームページ > 記事 > ウェブフロントエンド > vue-router のインストールと使用法を 1 つの記事でマスターする
この記事では、vue に関する関連知識を紹介しており、主に vue-router のインストールと使い方に関する関連知識を紹介していますので、一緒に見ていきましょう。 。
【関連する推奨事項: javascript ビデオ チュートリアル、vue.js チュートリアル】
npm install vue-router --save
Vue.use(VueRouter) を呼び出します。 )
マッピング構成
を渡します。マウント作成された ルーティング インスタンス
を使用して作成されたルーターのファイルは、src の下の router
フォルダーのindex.js# にあります。 #ファイル #index.js の内容は次のとおりです:
注: ここではルーターが登録されていますが、ルーターは登録されている必要があります。これは vue でのみ動作します。
マウント方法:
src ファイル下の main.js に
router を導入し、マウントします。 vue
インスタンス。 <pre class="brush:php;toolbar:false">//main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})</pre>
実際の使用例: App.vue の主要な構成は次のとおりです:
<template> <div> <h2>我是app组件</h2> <!-- 通过router自带标签实现 --> <router-link>首页</router-link> <router-link>关于</router-link> <router-link>用户</router-link> <router-link>档案</router-link> <!-- <router-link to='/home' tag="button" replace>首页</router-link> <router-link to='/about' tag="button" replace >关于</router-link>--> <!-- 通过代码跳转 --> <!-- <button @click="homeClick">首页</button> <button @click="aboutClick">关于</button> --> <keep-alive> <router-view></router-view> </keep-alive> <button>用户2</button> <button>档案</button> </div> </template> <script> export default { name: "App", data(){ return{ userId:'yzk' } }, methods: { aboutClick() { // 通过代码的方式修改路由 vue-router // 不能如下操作:此操作会绕过路由进行修改,违背初衷 // history.pushState({},'','home') // this.$router.push("/home"); this.$router.replace("/home"); console.log("about"); }, homeClick() { // this.$router.push("/about"); this.$router.replace("/about"); console.log("home"); }, userClick(){ this.$router.push('/user/'+this.userId); }, profileClick(){ this.$router.push({ path:'/profile', query:{ name:'kobe', age:18, height:1.98 } }) } }, }; </script> <style> .router-link-active { color: red; } .active { color: pink; } </style>
Router の Index.js ファイルは次のとおりです:
// 配置路由信息 import Vue from 'vue' import VueRouter from 'vue-router' // import Home from '../components/Home' // import About from '../components/About' // import User from '../components/User' // 懒加载,提高效率(因为app.js文件中集成了所有的业务代码,因此请求事件可能较长 // 通过将app.js分隔,在需要使用某些js代码的时候,才接收其代码) const Home = () => import('../components/Home') const HomeNews = () => import('../components/HomeNews') const HomeMessage = () => import('../components/HomeMessage') const About = () => import('../components/About') const User = () => import('../components/User') const Profile = () => import('../components/Profile') // 1.通过Vue.use(插件),安装插件 Vue.use(VueRouter) // 2.创建VueRouter对象 const routes = [ { path: '', // component: Home // 重定向redirect redirect: '/home' }, { path: '/home', component: Home, meta: { title: "首页" }, children: [ { path: '', redirect: 'news' }, { path: 'news', // 注意这里是没有s的!!! component: HomeNews, }, { path: 'message', component: HomeMessage }, ] }, { path: '/about', component: About, meta: { title: "关于" }, }, { path: '/user/:userId', component: User, meta: { title: "用户" }, }, { path: '/profile', component: Profile, meta: { title: "档案" }, } ] const router = new VueRouter({ // 配置路由和组件间的映射关系 routes, mode: 'history', linkActiveClass: 'active' }) // 3.将router对象传入到Vue实例中 export default router // 导航守卫 前置钩子 router.beforeEach((to, from, next) => { document.title = to.matched[0].meta.title console.log('+++'); next() }) // 导航守卫, 后置钩子 不需要调用next函数 router.afterEach((to,from) => { console.log('----'); })
main.js マウント場所:
import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, render: h => h(App) })
[関連する推奨事項:
javascript ビデオ チュートリアル、
vue.js チュートリアル以上がvue-router のインストールと使用法を 1 つの記事でマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。