vue-cli之router基本使用 vue-cli之router基本使用方法详解
昔有木如盖 人气:0想了解vue-cli之router基本使用方法详解的相关内容吗,昔有木如盖在本文为您仔细讲解vue-cli之router基本使用的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,cli,router,下面大家一起来学习吧。
1、在src目录下新建router目录,再建立index.js
import Vue from 'vue'; import VueRouter from 'vue-router'; import goods from '@/components/goods/goods'; Vue.use(VueRouter); export default new VueRouter({ routes: [ { path: '/', redirect: {name: 'goods'} } });
代码中@是在webpack.base.conf.js里修改的配置,目的是每一次引入组件之类的文件都要写相对路径太麻烦,直接用@代替即可,配置修改如下
resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } }
2、入口文件main.js里引入并挂载到节点上
import router from './router'; /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } });
3、在例如App.vue文件中使用,点击即可切换路由,内容则呈现在router-view容器中
<template> <div id="app"> <div class="tab"> <router-link to="/goods" >商品</router-link> </div> <router-view></router-view> </div> </template>
如果有比如商品、商家、评论三个点击切换路由,要想设置当前点击的某个节点的样式,可以设置
.router-link-active {color: rgb(139,0,0);}
加载全部内容