vue-router 路由

最新推荐文章于 2022-11-16 08:25:04 发布

无盐海

最新推荐文章于 2022-11-16 08:25:04 发布

阅读量251

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Fanbin168/article/details/88033431

版权

Vue 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

vue-router的官方页面：https://router.vuejs.org/zh/installation.html

一：安装vue-router

直接去https://unpkg.com/vue-router/dist/vue-router.js网站进行下载vue-router.js文件

然后将vue-router.js引入到项目中就可以了。（注意，vue-router.js是依赖vue.js的）

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

案例

原理描述：首先我们在点击登陆，或者注册按钮的时候，会切换到<a>标签所指向的地址，即：地址改变

然后我们定义的路由就会捕捉到这个地址，然后将这个地址要展示的组件显示到页面上。

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
    <script src="~/Scripts/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <!--Vue中的路由是基于hash的（即：锚点）所以<a>标签在做页面跳转的时候href地址不能以/线开始（即：不能直接写成<a href="/login">否则就跳转到一个真实的页面了，正确的做法是在/线 前加上一个#-->
        <a href="#/login">登陆</a> <a href="#/register">注册</a>
        <hr />
        <!--我们每次写a标签的时候，href的值都要在前面加一个#符号，特别烦，于是vue-router.js给了我们一个<roter-link>标签-->
        <!--router-link是一个路由的连接，它默认渲染成一个a标签，当然我们也可以通过tag属性将它渲染成一个其他的标签,其实不管你渲染成什么标签，vue-router.js都会给他绑定一个点击跳转的触发事件-->
        <router-link to="/login">登陆</router-link>
        <router-link to="/register" tag="sapn">注册</router-link> <!--tag="sapn"表示将这个链接渲染成一个span标签，但是它同样可以点击跳转-->

       

        <!--这是vue-router提供的元素，专门用来当做占位符的，将来再根据路由规则匹配到的组件就会展示到这个router-view中去-->
        <router-view></router-view>
    </div>
    <template id="login">
        <div>
            <h3>这是登陆窗口</h3>
        </div>
    </template>
    <template id="register">
        <div>
            <h3>这里是注册窗口</h3>
        </div>
    </template>
    <script>

        var login = { template: "#login" } //定义个组件模板对象login
        var register = { template: "#register" } //定义个组件模板对象register

        //1:创建一个路由对象（当导入vue-router.js包后，在window的全局对象中，就有了一个路由构造函数，名字叫VueRouter）
        //2:在new VueRouter对象的时候，可以为构造函数传递一个配置对象
        var routerObj = new VueRouter({
            //route //这个配置对象中的route表示[路由匹配规则]的意思
            routes: [
                //每个路由规则都是一个对象，这个规则对象身上有两个必须的属性
                //属性1：path,表示监听那个路由链接地址；
                //属性2：component，表示如果路由是前面匹配到的path则展示component属性对应的哪个组件

                { path: "/", redirect: "/login" }, //将根地址重定向到login模块；例如根地址是：http://localhost:64317/Home/Index，当我们打开这个地址的时候，就会被这条路由捕捉到，然后就会自动重定向到http://localhost:64317/Home/Index#/login这个模块
                { path: "/login", component: login },
                { path: "/register", component: register }

            ]

        });


        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {

            },
            components: {
                //这里是定义私有组件的地方
            },
            router: routerObj //将路由规则对象，注册到我们的vm实例上，用来监听URL 地址的变化，然后展示对应的组件

        });
    </script>
</body>
</html>

无盐海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-router 路由

vue-router的官方页面：https://router.vuejs.org/zh/installation.html一：安装vue-router直接去https://unpkg.com/vue-router/dist/vue-router.js网站进行下载vue-router.js文件然后将vue-router.js引入到项目中就可以了。（注意，vue-router.js是依赖v...
复制链接

扫一扫

专栏目录