目錄
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>