Vue router的安装与使用
安装有3种方式
1.npm install vue-router
2.cnpm install vue-router
3.yarn add vue-router
安装成功后
在src中新建view文件夹,在view下新建Home文件夹,在文件夹中新建index.vue
在index.vue中输入
<template>
<div id="home">
<Content />
<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>
</div>
</template>
<script>
import Content from "../../components/Content.vue"
export default {
name: "index",
data(){
return{
}
},
components:{
Content,
},
methods:{
}
}
</script>
<style scoped>
</style>
进行注册运行
然后在src文件夹下创建router.js
在components下创建Text1.vue、Text2.vue、Text3.vue与Content.vue 进行切换跳转
在router.js中输入以下代码
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from './view/Home/'
// import List from './view/List/'
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,
// Vue中使用children实现路由的嵌套
// 使用 children 属性,实现子路由,同时,子路由的 path 前面,不要带 / ,
// 否则永远以根路径开始请求,这样不方便我们用户去理解URL地址
children:[
{
path: '/',
component: Text3,
},
{
path: 'text1',
component: Text1,
},
{
path: 'text2',
component: Text2,
},
{
path: 'text3',
component: Text3,
}
]
}
]
})
path:’/’,默认跳转的路径
在App.vue中的div内引入router组件
<router-view></router-view>
在src下的main.js中引入路径
import router from './router'
最后运行项目
默认text3第一
点击text2跳转
点击text1跳转