vue-router的安装和使用
vue-router的安装与使用
一、安装
步骤1:安装vue-router
npm install vue-router --save
步骤2:在模块化工程中使用它(因为是一个插件,所以可以通过Vue.use()来安装路由功能)
-
导入路由对象,并调用
Vue.use(VueRouter)
-
创建路由实例,并传入路由映射配置
-
在Vue实例中挂载创建的路由实例
二、使用
创建的router的配置文件在src下的router
文件夹下的index.js
文件中
index.js中内容如下:
注:虽然在这里已经注册了router,但是其需要被挂在在vue上,才能起作用。
挂载方法:
在src文件下的main.js
中引入router
,并挂载在vue
实例上。
//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)
})
实际使用案例:
App.vue中关键配置如下:
<template>
<div id="app">
<h2>我是app组件</h2>
<!-- 通过router自带标签实现 -->
<router-link to='/home' tag="button" replace active-class="active">首页</router-link>
<router-link to='/about' tag="button" replace active-class="active">关于</router-link>
<router-link :to="'/user/' userId" tag="button" active-class='active'>用户</router-link>
<router-link :to="{path:'/profile',query:{name:'yzk',age:18,height:1.88}}">档案</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 @click="userClick">用户2</button>
<button @click="profileClick">档案</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)
})
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfgfgb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24