vue-router的简单使用

    根据不同的地址跳转到不同的页面，SPA单页应用，单页面应用就是视觉感觉是页面的切换，但页面其实一直没有刷新，项目文件中也只有一个.html文件。不需要跟服务器频繁的进行交互，只需要通过ajax来在切换的时候获取最新的数据，而不需要把整个页面都重新加载。而前端路由就是也是切换浏览器地址，但确实通过js来控制切换的。

安装

npm install --save vue-router //生产环境--save

首先在router文件夹下的index.js文件中引入

//引入vue vue的语法不用加封号，美观
import Vue from "vue"
//引router
import VueRouter from 'vue-router'
//Vue安装模块(全局定义路由) 在vue根实例中注册router,为了全局嫩使用router
// 分别导入四个组件当然我们首先要有这四个组件（这四个组件是将要跳转的页面的vue插件）
import Home from '../components/Home'
import Market from '../components/Market'
import Cart from '../components/Cart'
import Mine from '../components/Mine'
// 创建路由实例，并且配置路由规则并export default暴露
export default new VueRouter({
// 这里写路由规则，配置路由表
//但是如果url里不想出现丑陋hash值，在new VueRouter的时候配置mode值为history来改变路由模式
mode: history
routes: [
// 这个path就是router-link里的to跳转的地址
// component就是根据路由地址，找到对应的组件，显示到router-view中
{ path: '', redirect: Home }, //redirect是重定向的意思作用是默认跳转home页；
{ path: '/home', component: Home },
{ path: '/market', component: Market },
{ path: '/cart', component: Cart },
{ path: '/mine', component: Mine }
]
})

3.现在我们去配置根组件app.vue

<template>
  <div id="app">
    <!-- router-view是单页应用，路由切换时填充内容的容器，
      换句话说，就是每点击一个路由跳转，我们只是把router-view中的内容替换掉而已
     -->
    <router-view></router-view>
    <div class="tabbar">
      <router-link to="/home">首页</router-link>
      <router-link to="/market">闪送超市</router-link>
      <router-link to="/cart">购物车</router-link>
      <router-link to="/mine">我的</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
    
  }
}
</script>

<style>
#app .tabbar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45px;
  background-color: wheat;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>

4.配置vue根实例

//引入vue
import Vue from 'vue'
//引入根组件
import App from './App'
// 导入路由自定义的路由模块
// 如果router目录下有index.js的话，默认就会找到它，不需要写index
import router from './router'
//下面这个好像是是否停止警告
Vue.config.productionTip = false
//vue根实例
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  // 需要把路由实例挂载到这个router选项中
  router
})

一个最简单的vue路由完成了。
1.多级路由：

在创建路由表的时候，可以为每一个路由对象创建children属性，值为数组，在这个里面又可以配置一些路由对象来使用多级路由，注意：一级路由path前加'/'

const routes = [
{path:'/mine', component:AppNews, children:[
{path:'inside',component:AppNewsInside},
{path:'outside',component:AppNewsOutside}
]},
{path:'/user/:id',component:User}//传参
]

二级路由组件的切换位置依然由router-view来指定（指定在父级路由组件的模板中）
2.默认路由和重定向：

当我们进入应用，默认像显示某一个路由组件，或者当我们进入某一级路由组件的时候想默认显示其某一个子路由组件，我们可以配置默认路由，或者当url与路由表不匹配的时候：
{path:'',redirect:'/main'}
///...放在最下面
{path:'**',redirect:'/main'},

3.router-link的to属性，默认写的是path（路由的路径），可以通过设置一个对象，来匹配更多
:to=" 'mine' + 变量"

vue-router的简单使用

vue-router的简单使用

推荐阅读更多精彩内容