本文介绍了如何在Vue2项目中配置和使用vue-router，包括路由重定向、多层嵌套和动态路由的实现。首先，通过webstorm创建vue2脚手架并安装vue-router@3。接着，删除默认组件并创建Home、Movie、About组件，建立router文件夹和index.js。在main.js中挂载router，并在App.vue中设置路由链接和渲染。最后，展示了重定向、多层嵌套及动态路由的具体代码示例。
使用webstorm创建vue2脚手架
回车选择第三项
空格取消babel和Linter
取消后回车进行下一步骤
等待程序安装,出现以下文件显示安装成功
点击按钮运行后出现端口地址
点击端口地址
出现该页面表明成功创建了vue2脚手架
脚手架创建成功后在Terminal中安装vue-router文件: npm install vue-router@3
@3表明是在vue-router3中的最后一次更新的版本,可在package.json中查看该文件版本号
在vue2中路由文件对应版本为vue-router3
在vue3中路由文件对应版本为vue-router4
至此文件配置完成
删除HelloWorld.vue文件并将App.vue文件中的:
<HelloWorld msg="Welcome to Your Vue.js App"/>
import HelloWorld from './components/HelloWorld.vue'
HelloWorld
删除
在src文件夹下的components文件中创建Home、Movie、About三个组件
Home:
<template>
<div>
<h2>我是Home组件</h2>
</div>
</template>
<script>
export default {
name: "Home"
}
</script>
<style scoped>
</style>Movie:
<template>
<div>
<h2>我是Movie组件</h2>
</div>
</template>
<script>
export default {
name: "Movie"
}
</script>
<style scoped>
</style>About：
<template>
<div>
<h2>我是About组件</h2>
</div>
</template>
<script>
export default {
name: "About"
}
</script>
<style scoped>
</style>组件创建完成后在src文件夹下创建router文件夹,router文件夹下创建js文件index.js
index.js:
//1.导入Vue和VueRouter
import Vue from "vue";
import VueRouter from "vue-router";
//2.在Vue中注册VueRouter
Vue.use(VueRouter)
//3.创建路由器(VueRouter)的实例
const router = new VueRouter({
//3.1定义路由表routes:包含若干对象,每个对象实现了链接地址和组件之间的映射
routes:[
//redirect重定向,当用户访问A页面时,强制用户向B页面进行访问
//{path:'/',redirect:'/home'},//path:'/'表示项目的根路径;redirect为重定向,值'/home'为重定向地址
{path:'/home',component:()=>import('../components/Home')},//不带{}的()=>自带返回值
{path:'/movie',component:()=>import('../components/Movie')},//path：匹配地址
{path:'/about',component:()=>import('../components/About')},
],
//3.2设置路由模式
mode:"history"//默认为哈希模式hash:地址栏中组件前会有#
})
//4.导出路由器对象
export default router在main.js文件中挂载router
main.js:
import Vue from 'vue'
import App from './App.vue'
import router from "@/router";//导入创建的router
Vue.config.productionTip = false
new Vue({
router,//在Vue实例中挂载路由器
render: function (h) { return h(App) },
}).$mount('#app')
在App.vue文件中存放超链接router-link并在router-view中进行渲染
App.vue:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<!-- 超链接router-link-->
<router-link to="/home">首页</router-link>
<router-link to="/movie">电影</router-link>
<router-link to="/about">关于</router-link>
<hr/>
<!-- 在router-view中进行渲染-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
vue-router路由进行重定向:
//redirect重定向,当用户访问A页面时,强制用户向B页面进行访问
//{path:'/',redirect:'/home'},//path:'/'表示项目的根路径;redirect为重定向,值'/home'为重定向地址
用户访问根目录时:http://localhost:8081/
页面强制重定向为：http://localhost:8081/home
//1.导入Vue和VueRouter
import Vue from "vue";
import VueRouter from "vue-router";
//2.在Vue中注册VueRouter
Vue.use(VueRouter)
//3.创建路由器(VueRouter)的实例
const router = new VueRouter({
//3.1定义路由表routes:包含若干对象,每个对象实现了链接地址和组件之间的映射
routes:[
//redirect重定向,当用户访问A页面时,强制用户向B页面进行访问
{path:'/',redirect:'/home'},//path:'/'表示项目的根路径;redirect为重定向,值'/home'为重定向的地址
{path:'/home',component:()=>import('../components/Home')},//不带{}的()=>自带返回值
{path:'/movie',component:()=>import('../components/Movie')},//path：匹配地址
],
//3.2设置路由模式
mode:"history"//默认为哈希模式hash:地址栏中组件前会有#
})
//4.导出路由器对象
export default routervue-router路由进行多层嵌套
创建组件tab1、tab2
tab1:
<template>
<div>
<h2>我是tab1</h2>
</div>
</template>
<script>
export default {
name: "Tab1"
}
</script>
<style scoped>
</style>tab2:
<template>
<div>
<h2>我是tab2</h2>
</div>
</template>
<script>
export default {
name: "Tab2"
}
</script>
<style scoped>
</style>在about中:
<template>
<div>
<h2>我是About组件</h2>
<router-link to="/about/tab1">tab1</router-link>
<router-link to="/about/tab2">tab2</router-link>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "About"
}
</script>
<style scoped>
</style>index:
//1.导入Vue和VueRouter
import Vue from "vue";
import VueRouter from "vue-router";
//2.在Vue中注册VueRouter
Vue.use(VueRouter)
//3.创建路由器(VueRouter)的实例
const router = new VueRouter({
//3.1定义路由表routes:包含若干对象,每个对象实现了链接地址和组件之间的映射
routes:[
{path:'/home',component:()=>import('../components/Home')},//不带{}的()=>自带返回值
{path:'/movie/:id',component:()=>import('../components/Movie')},//path：匹配地址
{
path:'/about',
component:()=>import('../components/About'),
//children:嵌套路由
children:[
{path:'tab1',component:()=>import('../components/Tab1')},
{path:'tab2',component:()=>import('../components/Tab2')}
]
},
],
//3.2设置路由模式
mode:"history"//默认为哈希模式hash:地址栏中组件前会有#
})
//4.导出路由器对象
export default router动态路由
Movie:
<template>
<div>
<h2>我是Movie组件</h2>
<!-- <p>电影ID:{{this.$router.params.id}}</p>-->
<!-- 第二种写法-->
<p>电影ID:{{ id }}</p>
</div>
</template>
<script>
export default {
name: "Movie",
props:['id']//第二种写法
}
</script>
<style scoped>
</style>index:
//1.导入Vue和VueRouter
import Vue from "vue";
import VueRouter from "vue-router";
//2.在Vue中注册VueRouter
Vue.use(VueRouter)
//3.创建路由器(VueRouter)的实例
const router = new VueRouter({
//3.1定义路由表routes:包含若干对象,每个对象实现了链接地址和组件之间的映射
routes:[
//redirect重定向,当用户访问A页面时,强制用户向B页面进行访问
{path:'/',redirect:'/home'},//path:'/'表示项目的根路径;redirect为重定向,值'/home'为重定向的地址
{path:'/home',component:()=>import('../components/Home')},//不带{}的()=>自带返回值
//path:'/movie/:id'动态路由,传递给Movie组件的id不同,Moovie组件中显示的内容就会不同
{path:'/movie/:id',component:()=>import('../components/Movie'),props:true},//path：匹配地址
//动态路由第二种写法://props:true表示动态路由时允许props属性
//{path:'/movie/:id',component:()=>import('../components/Movie'),props:true},//path：匹配地址
{
path:'/about',
component:()=>import('../components/About'),
children:[//children:嵌套路由
{path:'tab1',component:()=>import('../components/Tab1')},
{path:'tab2',component:()=>import('../components/Tab2')}
]
},
],
//3.2设置路由模式
mode:"history"//默认为哈希模式hash:地址栏中组件前会有#
})
//4.导出路由器对象
export default router
手动输入测试
扫一扫
1521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
