目录
Vue路由简单使用
1. VueRouter
-1.中文官网:https://router.vuejs.org/zh/
-2.VueROuter英文官网:https://router.vuejs.org/
2.Vue路由配置:
2.1 安装Vue路由
npm install vue-router --save / cnpm install vue-router --save
2.2 引入并 Vue.use(VueRouter) (main.js入口文件写)
import VueRouter from 'vue-router'
Vue.use(VueRouter)
2.3 配置路由
2.3.1 创建组件 引入组件
//1.创建组件,引入组件
import Home from './components/Home.vue';
import News from './components/News.vue';
2.3.2 定义路由(建议复制)
//2.配置路由 注意名字
const routes=[
{ path: '/home',component:Home},
{path:'/news', component:News},
{ path: '*', redirect:'/home'}//使用重定向和别名配置默认跳转路由
]
2.3.3 实例化VueRouter
//3.实例化VueRouter
const router=new VueRouter({
routes //(缩写)相当于 routes:routes
})
2.3.4 挂载路由
new Vue({
el: '#app',
router,
render: h => h(App)
})
2.3.5 标签引入
//5.把<router-view></router-view>放在根组件App.vue里
3. 具体代码实现
3.1 挂载的两个简单组件
<template>
<div id="home">
<h2>我是home组件</h2>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style lang="scss">
</style>
<template>
<div id="news">
<h2>我是news组件</h2>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style lang="scss">
</style>
3.2 main.js入口文件的配置
import Vue from 'vue'
import App from './App.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件,引入组件
import Home from './components/Home.vue';
import News from './components/News.vue';
//2.配置路由 注意名字
const routes=[
{ path: '/home',component:Home},
{path:'/news', component:News},
{ path: '*', redirect:'/home'}//使用重定向和别名配置默认跳转路由
]
//3.实例化VueRouter
const router=new VueRouter({
routes //(缩写)相当于 routes:routes
})
//4.挂载路由 router
new Vue({
el: '#app',
router,
render: h => h(App)
})
//5.把<router-view></router-view>放在根组件App.vue里
3.3 根组件App.vue的配置
<template>
<div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
msg:'你好vue'
}
}
}
</script>
<style lang="scss">
</style>