Vue.js 路由

最新推荐文章于 2023-12-11 16:12:55 发布

小鸟哗啦啦

最新推荐文章于 2023-12-11 16:12:55 发布

阅读量129

点赞数 1

分类专栏： VUE 文章标签： vue javascript

本文链接：https://blog.csdn.net/vampire10086/article/details/107364012

版权

VUE 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

Vue.js 路由

通过不同的URL来访问不同的内容

中文文档： https://router.vuejs.org/zh/

通过Vue.js可以实现多视图的单页Web应用，single page web application SPA

1.引入 vue-route.js文件

地址： https://unpkg.com/vue-router/dist/vue-router.js

2.简单实例

借用菜鸟教程：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue route</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.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>
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！
</script>
</body>
</html>

3.组件使用的细节点

<div id="root">
    <counter ref="one" @change="handleChange"></counter>
    <counter ref="two" @change="handleChange"></counter>
    <div>{{total}}</div>
</div>

<script>

    Vue.component('counter',{
        template: '<div @click="handleClick">{{ number }}</div>',
        data: function(){
            return {
                number: 0
            }
        },
        methods: {
            handleClick: function () {
                this.number ++
                this.$emit('change') //$emit 触发
            }
        }
    })

    var vm =new Vue({
        el: "#root",
        data: {
            total: 0
        },
        methods: {
            handleChange: function () {
                this.total= this.$refs.one.number + this.$refs.two.number
                console.log(this.$refs.one.number)
                console.log(this.$refs.two.number) //$refs 用来操作DOM,类似于class
            }
        }
    })
</script>

props的用法： props是单向数据绑定的，父组件传给子组件，并不能反过来。

4.过渡与动画

<style>
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .fade-enter-active, .fade-leave-active {
        transition: opacity 2s
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
        opacity: 0
    }
</style>

<div id = "databinding">
    <button v-on:click = "show = !show">点我</button>
    <transition name = "fade">
        <p v-show = "show" v-bind:style = "styleobj">动画实例</p>
    </transition>
</div>
<script type = "text/javascript">
    var vm = new Vue({
    el: '#databinding',
        data: {
            show:true,
            styleobj :{
                fontSize:'30px',
                color:'red'
            }
        },
        methods : {
        }
    });
</script>

小鸟哗啦啦

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 路由

Vue.js 路由通过不同的URL来访问不同的内容中文文档： https://router.vuejs.org/zh/通过Vue.js可以实现多视图的单页Web应用，single page web application SPA1.引入 vue-route.js文件地址： https://unpkg.com/vue-router/dist/vue-router.js2.简单实例借用菜鸟教程：<!DOCTYPE html><html>&
复制链接

扫一扫