Vue-router安装及使用&切换

Vue-router安装及使用

1、安装：npm install vue-router或cnpm install vue-router或yarn add vue-router
2、在新建router.js中引用如下代码（router.js建立在src文件夹下）

importVuefrom'vue'
importVueRouterfrom'vue-router'
Vue.use(VueRouter)

3、在src中新建view文件夹，在view新建例如：Home文件夹，在文件夹中新建index.vue

<template>
<divid="home">
<Content/>
</div>
</template>
<script>
import Content from "../../components/Content.vue"
export default{
name:"index",
data(){
return{
}
},
components:{
Content,
},
methods:{
}
}
</script>

<style scoped>
</style>

4、在router.js中设置如下两步

import Home from './views/Home/'

export default new VueRouter({
routes:[
{
path:'/',
redirect:'/home'//设置默认指向
},
{
path:'/home',
component: Home,
},
]
})

5、在App.vue中的div内引入

<router-view></router-view>

6、在main.js中

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
router,
render: h => h(App),
}).$mount('#app')

切换

1.在components中引入切换的文件

2.配置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>

3.配置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'//设置默认指向
// redirect:'/list'//设置默认指向
},
{
path:'/home',
component: Home,
// Vue中使用children实现路由的嵌套
// 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，
// 否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
children:[
{
path: '/',
redirect:'/text1',//优先显示
},
{
path: 'text1',
component: Text1,
},
{
path: 'text2',
component: Text2,
},
{
path: 'text3',
component: Text3,
}
]
}
]
})