vue路由的基本使用

最新推荐文章于 2023-05-16 18:39:47 发布

你是人间五月天

最新推荐文章于 2023-05-16 18:39:47 发布

阅读量148

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/u012758488/article/details/106534802

版权

vue 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <!--vue-router提供的元素，专门用来当作占位符，将来，路由规则，匹配到的组件就会展示到这里-->
        <router-view></router-view>
        <a href="#/login">登录</a>
        <a href="#/regi">注册</a>

        <!--router-link默认渲染为一个a标签-->
        <router-link to="/login">登录</router-link>
        <router-link to="/regi">注册</router-link>
    </div>
</body>
<script>
    var login = {
        template:'<h1>这是登录组件</h1>'
    }
    var regi = {
        template:'<h1>这是注册组件</h1>'
    }
    //创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有了一个路由的构造函数，VouRouter
    //在new路由对象时，可以为构造函数传递一个配置对象
    var routerObj = new VueRouter({
        //routes表示路由匹配规则
        routes: [
            //每个路由规则都是一个对象，必须有两个属性，
            //1 path 表示监听哪个路由链接地址
            //2 component,表示如果路由是前面匹配到的path,则展示component对应的组件
            { path: '/login',component:login},
            { path: '/regi',component:regi},
            //路由重定向
            { path: '/',redirect: '/login'}
        ]
    })


    //创建一个vue实例
    //当我们导入包之后，在浏览器的内存中就多了一个vue构造函数
    var vm = new Vue({
        el: '#app',//表示当前我们new的这个vue实例要控制页面上的哪个区域
        data: { //data属性中存放的是el中要用到的数据
            flag: false
        },
        components: {
            
        },
        //将路由规则对象注册到vm对象上
        router: routerObj
    });
    
</script>
</html>

你是人间五月天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue路由的基本使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.
复制链接

扫一扫

专栏目录