vue-路由配置与使用步骤

一、安装

本地环境安装路由插件：npm install vue-router --save-dev

二、配置

在main.js或者src/router文件夹下的index.js中这里介绍main.js

// 入口文件
import Vue from 'vue'
// 1.1 导入路由的包
import VueRouter from 'vue-router'
// 1.2 安装路由
Vue.use(VueRouter)
// 1.3 导入自己的 router.js 路由模块
import router from './router.js'

三、使用

import VueRouter from 'vue-router'

// 1. 创建路由对象
var router = new VueRouter({
  routes: [
    {path:'/',redirect:'/home'},
    //配置路由规则
    {path:'/home',component:HomeContainer},
    {path:'/member',component:MemberContainer},
    {path:'/shopcar',component:ShopcarContainer},
    {path:'/search',component:SearchContainer},
    {path:'/home/newslist',component:NewsList}
       
  ],
  linkActiveClass:'mui-active' //覆盖默认的路由高亮的类，默认的类叫做 router-link-active

})

//把路由对象暴露出去
export default router


//2.导入对应的路由组件
import HomeContainer from './components/tabar/HomeContainer.vue'
import MemberContainer from './components/tabar/MemberContainer.vue'
import SearchContainer from './components/tabar/SearchContainer.vue'
import ShopcarContainer from './components/tabar/ShopcarContainer.vue'
import NewsList from './components/news/newslist.vue'



//3.在App.vue页面展示路由
<router-view> </router-view>


//4.展示路由切换

<router-link  to="/home">切换到HomeContainer组件</router-link>
 
<router-link  to="/member">切换到MemberContainer组件</router-link>

上面就是vue路由的使用过程.供大家参考！

来源：https://blog.csdn.net/zhanduo0118/article/details/98884781

标签

vue

路由

vue路由