VUE 组件 中路由
本帖最后由 周大胖子 于 2018-11-28 22:34 编辑其实和angular真像；
在大地老师的白话中，大致分为五步走
1. 安装vue-router 模块；cnpm install vue-router --save
2. 在main.js中引入 该中间件 并且使用
import VueRouter from 'vue-router'
Vue.use(VueRouter);3.配置该路由 3.1创建 组件并且引入 【就是在个Home.vue 文件和 News文件，然后在main.js中引入】
3.2定义路由
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News }, 3.3实例化路由const router = new VueRouter({
routes // short for `routes: routes`
})
4.挂载
new Vue({
// 4
router,
render: h => h(App),
}).$mount('#app')
5.在App.vue中使用 该标签 规定路由区域
<router-view></router-view>
代码全部公开
main.js
import Vue from 'vue'
import App from './App.vue'
// 3.1
import Home from './components/Home'
import News from './components/News'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
// 3.2
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News }
]
const router = new VueRouter({
routes // short for `routes: routes`
})
Vue.config.productionTip = false
new Vue({
// 4
router,
render: h => h(App),
}).$mount('#app')
app.vue
<template>
<div id="app">
<hr>
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
data(){ //业务逻辑定义的数据
return {
msg2:'哈哈哈'
}
}
,methods:{ //存放VUE的方法
}
,name: 'app',
components: {
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.red{
color:red;
}
.blue{
color:blue;
}
</style>
{ path: '*', component: Home} 默认首页
页:
[1]