Vue router
1、安装router组件:
1、npm install vue-router
2、cnpm install vue-router
3、yarn add vue-router
三选一进行安装(建议用第二个或者第三个,第一个可能会卡)
2、在src里新建一个js(我这里是router.js),并在其中引用如下代码
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
3、在src中新建view文件夹,在view里新建例如:Home文件夹,在文件夹中新建index.vue
index.vue:
代码:
<template>
<div id="home">
<Content />
123
<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>
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中的div内引入
6、最后在main.js中引入 import router from ‘./router’,并在new的实例中增加router
打开浏览器就可以看到效果了
总结
准备工作:
1、安装好router组件
2、src中新建一个js文件、一个view文件夹,在view里再建一个文件夹并在其下新建vue文件。
步入正题:
1、在新建的js里引入组件
2、在新建的vue文件中写上想展示的内容
3、在新建的js中导入刚写好的vue页面
4、在App.vue中引入
5、在main.js中导入刚写好的vue页面,并添加实例
拓展(路由跳转)
这里要用到children
以我的为例,在components中新建需要跳转的页面:Text1.vue、Text2.vueText3.vue
在router.js中引入如下内容
// 组件
import Home from './Views/Home' //引入Home
import Text1 from './components/Text1'
import Text2 from './components/Text2'
import Text3 from './components/Text3'
javascript
children:[
{
path:'/',
redirect:'text1',
},
{
path: 'text1',
component: Text1,
},
{
path: 'text2',
component: Text2,
},
{
path: 'text3',
component: Text3,
}
]
可以得到如下页面: