先把第三小节里面默认生成的文件删除干净,只剩下 main.js 和 App.vue,内容如下所示:
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false;
new Vue({
el: '#app',
components: { App },
template: ' '
})
现在的文件目录如下所示:
安装 vue-router 组件,在 idea 的控制台执行以下的命令:
# 先用这个安装试试,如果成功了就不用往下看了。
npm install vue-router
# 上面安装失败再用这个
cnpm install vue-router
# 这个是卸载的命令
npm uninstall vue-router
# 这个也是卸载的命令
cnpm uninstall vue-router
# 如果上面的都不行再用这个,因为上面的版本太高了
npm install i [email protected]
在 main.js 里面添加我们的 vue-router 组件,一共分为两步,如下所示:
import Vue from 'vue'
import App from './App'
// 1、导入 vue -router 组件
import VueRouter from 'vue-router'
Vue.config.productionTip = false;
// 2、需要显示声明使用
Vue.use(VueRouter);
new Vue({
el: '#app',
components: { App },
template: ' '
})
至此,我们的 vue-router 组件就引入成功了,其他的组件也是这么两步导入进去的。
在 src--components 的目录下右键 new -- Vue component ,创建一个名为 Content.vue 和 Main.vue 的组件,如下所示:
内容页
// scoped 表示此样式只在当前的 vue 里面生效
首页
// scoped 表示此样式只在当前的 vue 里面生效
在 src 目录下创建 router 目录用来专门管理所有的路由,并在router目录下创建一个 index.js 来管理配置,内容如下所示:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Content from '../components/Content'
import Main from '../components/Main'
// 安装路由
Vue.use(VueRouter);
// 配置导出路由
export default new VueRouter({
routes:[
{
// 路由路径
path:'/content',
name:'content',
// 跳转的组件
component:Content
},
{
path:'/main',
name:'main',
component:Main
},
]
})
在 main.js 里面配置路由信息,内容如下所示:
import Vue from 'vue'
import App from './App'
// 1、在 router 目录下自动扫描里面的路由配置(只有当文件名字为 index.js 才会自动扫描)
import router from './router'
Vue.config.productionTip = false;
new Vue({
el: '#app',
// 2、配置路由
router,
components: { App },
template: ' '
})
在 App.vue 里面配置跳转的链接,如下所示,它的工作流程是:点击首页,由于配置了 router,他就会去 main.js 里面找,由于我们在 main.js 里面配置了 router,他就去 router 目录下的 index.js 文件里面去找路由,最终找到了对应的组件信息。
首页
内容页
执行 npm run dev,测试下: