vue-router基础入门

2018年3月11日22:23:55 发表评论 29

vue-router是vue官方提供的一个路由组件,可以非常方便的给我们的项目或者说spa单页面应用设置路由,下文将参考vue-router官方文档带大家一起领略vue-router的风采,这里就不配置vue项目运行环境了,直接引入vue和vue-router文件来进行教学。

vue-router基础入门

vue-router例子

HTML

<div id="app">
    <div class="content">
        <router-link to="/goods">商品</router-link>
        <router-link to="/ratings">评论</router-link>
        <router-link to="/seller">商家</router-link>
    </div>
    <router-view></router-view>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>

JS

// 可能通过定义或者引入外部组件
// 1. 定义组件。
const goods = { template: '<p>goods</p>' };
const ratings = { template: '<p>ratings</p>' };
const seller = { template: '<p>seller</p>' };
// 或者(定项目一般是以这个方式)
import goods from 'components/goods/goods';
import ratings from 'components/ratings/ratings';
import seller from 'components/seller/seller';

// 2. 定义路由
const routes = [
  { path: '/goods', component: goods },
  { path: '/ratings', component: ratings },
  { path: '/seller', component: seller }
];

// 3. 创建 router 实例
const router = new VueRouter({
  // ES6缩写语法,相当于routes:routes
  routes  
});

// 4. 创建和挂载根实例。
const app = new Vue({
  el: '#app',
  router
});
// 或者
const app = new Vue({
  router
}).$mount('#app')

注:注册路由之后,我们就可以在任何的组件里面,使用this.$router来访问它。

vue-router基础知识

router-link

router-link其实是一个组件,它会渲染一个带链接的a标签,通过to属性就是设置a标签的href地址。

注:选中的router-link会自动加一个.router-link-activeclass。

router-link属性配置

  1. to:是必须要设置的属性,表示a标签的href地址,可以是一个字符串或者目标位置对象。
  2. replace:一个布尔类型,默认是false。如果设置为true,点击它将不会留下历史记录,你在浏览器点返回上一页是没有用的。
  3. tag:router-link默认是渲染a标签的,如果设置tag,就可以将它渲染成任意标签。
  4. active-class:链接被选中默认是添加router-link0-active的class的,如果设置这个属性,就可以在选中时加上任意的class值。

router-view

这个组件很关键,是用来渲染匹配到的路由的。

可以设置transition过渡动画和keep-alive缓存数据,具体的用法可以看vue官方教程

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

router.replace

路由重定向:

const routes = [
  { path: '/', redirect: '/goods'}
]

可以给重定向的目标设置一个名称

const routes = [
  { path: '/', redirect: { name: 'goods' }}
]

router.push

push方法和<router-link :to="...">是一样效果的。全局注册的路由,就要使用this.$router

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

router.go

go的方法可以控制浏览器history记录的前进和后退

// 在浏览器记录中前进一步,等同于 history.forward()
this.$router.go(1)
// 后退一步记录,等同于 history.back()
this.$router.go(-1)
// 前进 3 步记录router.go(3)
// 如果 history 记录不够用,那就默默地失败呗
this.$router.go(-100)
this.$router.go(100)
猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: