Vue router路由安装配置及页面间跳转
程序员文章站
2022-04-10 15:03:33
安装项目终端输入 npm install vue-router或cnpm install vue-router或yarn add vue-router在src下新建router.js文件:import Vue from ‘vue’import VueRouter from ‘vue-router’Vue.use(VueRouter)新建页面src中新建view文件夹,在view新建例如:Home文件夹,在文件夹中新建index.vue......
一、安装配置
-
安装
项目终端输入 npm install vue-router或cnpm install vue-router或yarn add vue-router -
在src下新建router.js文件:
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter) -
新建页面
src中新建view文件夹,在view新建例如:Home文件夹,在文件夹中新建index.vue:
<template>
<div id="home">
<Content />
</div>
</template>
<script>
import Content from "../../components/Content.vue"
export default {
name: "index",
data(){
return{
}
},
components:{
Content,
},
}
4.router.js配置:
(1)引入页面
import Home from ‘./views/Home/’
(2)实例
export default new VueRouter ({
// 配置路由信息
routes: [
{
path: ‘/’,
redirect: ‘/home’ //设置默认指向
},
{
path: ‘/home’,
component: Home
}
]
})
5.App.vue:
<!-- 将页面渲染到App.vue里 -->
<router-view></router-view>
6.main.js:
import Vue from 'vue'
import App from './App.vue'
// 引入router实际挂载下
import router from './router'
Vue.config.productionTip = false
new Vue({
// 实例中增加挂载
router,
render: h => h(App),
}).$mount('#app')
打开浏览器即可看到页面。
二、页面间的跳转
- 在components文件下新建三个组件,并编辑下内容
<div>
text1内容
</div>
- router.js引入并配置路径:
// 引用组件
import Text1 from './components/Text1'
import Text2 from './components/Text2'
import Text3 from './components/Text3'
export default new VueRouter ({
// 配置路由信息
routes: [
{
path: '/',
redirect: '/home' //设置默认指向
},
{
path: '/home',
component: Home,
// 嵌套子路由
children:[
{
path:'text1',
component:Text1
},
{
path:'text2',
component:Text2
},
{
path:'text3',
component:Text3
}
]
},
]
})
- Home页面index.vue:
<router-link to="/home/text1">
<span>text1页面标题</span>
</router-link>
<router-link to="/home/text2">
<span>text2页面标题</span>
</router-link>
<router-link to="/home/text3">
<span>text3页面标题</span>
</router-link>
<!-- 渲染 -->
<router-view></router-view>
- 效果
本文地址:https://blog.csdn.net/qq_44718526/article/details/107555278