1、HTML和JS中使用router

介绍

学习vue-router的一些学习笔记,所有笔记内容请看 vue-router学习笔记

在HTML中直接使用

方法:
1、使用router-link 组件进行导航to 属性指定链接。 router-link 会被默认渲染程一个 < a >标签
2、< router-view > 为路由出口,路由匹配到的组件被渲染在这里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
   <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>
<body>
<div id = "app">
  <h1>Hello App!</h1>
  <p>
    // 使用router-link 组件进行导航
    // to 属性指定链接
    // router-link 会被默认渲染程一个<a>标签
    <router-link to='/foo'>Go to Foo</router-link>
    <router-link to='/bar'>Go to Bar</router-link>
  </p>
  // 路由出口
  // 路由匹配到的组件被渲染在这里
  <router-view></router-view>
</div>
<script>
</script>
</body>
</html>

JavaScript使用组件进行处理

1、定义路由
2、创建路由实例,传入配置参数
3、创建和挂在跟实例

// 组件,可以是任何形式创建的组件
const foo= {template:`<div>fo</div>`}

//1、定义路由
// path:映射地址
// component:映射的组件
const routes=[
    {path:'/foo',component :foo}
]
// 2、创建路由实例,传入配置参数
const router =new VueRouter({
      routes
})

// 3、创建和挂在跟实例
// 通过router配置参数注入路由
const app =new Vue({
    router
}).$mount("#app")// 挂在到id="app"上

通过注入路由器,我们可以在任何组件内通过 this.$ router 访问路由器,也可以通过 this.$route 访问当前路由:

// Home.vue
export default {
  computed: {
    username() {
      // 我们很快就会看到 `params` 是什么
      return this.$route.params.username
    }
  },
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值