vue路由设置

关于vue的安装前面也已经介绍了这里就不介绍了，今天主要介绍路由的设置，下面来一一分析一下

安装路由及配置

• 插件安装 npm install vue-router
  在main.js 里面设置

  import Vuex from 'vuex'
  Vue.use(Vrouter)
  

• 需要实例化router，将router加入到vue的实例中去

• 第三步：在实例化router中设置routers配置选项，mode:”history”:将路由设置成history模式

  var router=new Vrouter({
  //双花算法
  mode:"history",//切换到history模式；默认是hash模式，路由后面会加上一个"#"符号  
  linkActiveClass:"active",  /linkActiveClass：通过配置这个选项来改变点击的样式；
    routes:[
    //地址重定向
      {
          path:"/",
          redirect:"/cat",
        //  别名
      },
      {
      // path:"/dog/:color",//传参
      name:"mydog",
        path:"/dog",
        component:Dog,
        alias:"/dogs",
      },
      {
        name:"mycat",
          path:"/cat",
        component:Cat,
        alias:"/cats"
      },
      {
        name:"mysheep",
          path:"/sheep",
        component:Sheep,
        alias:"/sheeps"
      }
    ]
  })
  Vue.config.productionTip = false
  

• 设置vue-router显示的位置，通过内置组件 <router-view></router-view>

• 页面里跳转通过<router-link :to=“{path:’apple’}”>跳转到苹果页面</router-link>来进行切换

router-link组件

• 可以直接跳转 设置属性 <router-link to=“‘apple’”>跳转</router-link>
• 可以动态跳转：<router-link :to=“{path:’apple’}”>跳转</router-link>
• 具名的路由 通过tag这个参数；
  将标签转换为li <router-link :to=“{path:’apple’}” tag=“li”></router-link>

命名路由：设置的时候可以直接给路由加上name属性;然后在<router-link :to="{name:'applePage'}>跳转</router-link>里直接跳转