|
本帖最后由 周大胖子 于 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} 默认首页
|
|