Vue.js 路由

最新推荐文章于 2024-06-12 08:41:10 发布

頑張ってちしじょ

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量96

点赞数

本文链接：https://blog.csdn.net/weixin_45170547/article/details/100650778

版权

解析
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）
Vue.js 路由需要载入 vue-router 库
中文文档地址：vue-router文档。
安装
直接下载

https://unpkg.com/vue-router/dist/vue-router.js

NPM

cnpm install vue-router

实例
Vue.js + vue-router 可以很简单的实现单页应用。
是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址，即要显示的内容。

    <style>
        /* 当路由激活时 颜色改变 */
        .active{color:red} 
    </style>
</head>
<body>
    <!-- 前端后端分离 后端只负责提供接口供前端调用，像跳转都是前端自己处理的
        hash模式：# 开发时使用hash 不会导致404 hash方式不支持seo h5的history.pushState
        (上线采用h5的跳转)
     -->
    <div id="app">
        <!-- router-view是一个全局组件，可以直接使用 -->
        <!-- tag:可以改变标签 -->
        <!-- 声明式 -->
        <router-link to="/home" tag="button">首页</router-link>
        <router-link to="/list" tag="button">列表</router-link>
        <router-view></router-view>
    </div>
    <script src="/node_modules/vue/dist/vue.js"></script>
    <!-- 必须放在vue的后面 -->
    <script src="/node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        let home = {template:'<div>首页</div>'};
        let list = {template:'<div>列表页</div>'};
        let routes = [
            {path:'/home',component:home},  //配置的关系就是页面级组件
            {path:'/list',component:list},  //路径必须加/
        ];
        let router = new VueRouter({//引入vue-router自带VueRouter类
            //mode:'history',  //h5模式  开发时一般不使用      
            routes,
            linkActiveClass:'active'  //更改默样式的类名 默认叫router-link-active
        })
        let vm = new Vue({
            el:"#app",
            router
        })
    </script>

路由编程式写法

<body>
    <!-- 编程式导航，在Js跳转页面 -->
    <div id="app">
        <!-- to="/home"  等价于 :to="{path:'/home'} -->
        <router-link to="/home">首页</router-link>
        <router-link to="/list">列表页</router-link>
        <router-view></router-view>
    </div>
    <script src="/node_modules/vue/dist/vue.js"></script>
    <script src="/node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        let home = {
            template:'<div>首页 <button @click="tolist">去列表页</button></div>',
            methods:{
                //toList(){this.$router.push('/list')}, //强制跳转路径
                toList(){this.$router.replace('/list')},//路由替换，将当前的历史替换掉
            }
        };
        let list ={
            template:'<div>列表页 <button @click="back">返回</button></div>',
            methods:{
                back(){this.$router.go(-1)},  //返回上一级  go替换了back
            }
        };
        let routes =[
            {path:'',component:home},  //默认展示的路由
            {path:'/home',component:home},
            {path:'/list',component:list},
            //{path:'*',component:home},//这个地方路径不会变 只是切换组件而已
            {path:'*',redirect:'/home'}//路径变 组件也要切换  404的时候
        ];
        let router = new VueRouter({
            routes
        });
        let vm = new Vue({
            el:"#app",
            router,  //每个组件都会拥有一个名字叫$router的属性（有r的放的都是方法)
            //还有一个$route(没r的存的都是属性)
        })
    </script>

路由的迭代

<body>
    <div id="app">
        <router-link to="/home">首页</router-link>
        <router-link to="/detail">详情页</router-link>
        <router-view></router-view>
    </div>
    <template id="detail">
        <div>
            <router-link to="/detail/profile">个人中心</router-link>
            <router-link to="/detail/about">关于我</router-link>
            <router-view></router-view>
        </div>
    </template>
    <script src="/node_modules/vue/dist/vue.js"></script>
    <script src="/node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        let home = {template:'<div>home</div>'};
        let detail = {template:'<div>detail</div>'};
        let profile = {template:'<div>profile</div>'};
        let about = {template:'<div>about</div>'}
        let routes = [
            {
                path:'/home',
                component:home    
            },
            {
                path:'/detail',
                component:detail,
                children:[ //children中的路径永远不带/，如果带/表示是一级路由
                    {path:'profile',component:profile},
                    {path:'about',component:about}
                ]
            },
        ];
        let router = new VueRouter({
            routes
        })
        let vm = new Vue({
            el:"#app",
            router
        })
    </script>

路由参数

    <div id="app">
        <router-link to="/article/1/a">商品1</router-link>
        <router-link to="/article/2/b">商品2</router-link>
        <router-link to="/article/3/c">商品3</router-link>
        <router-view></router-view>
    </div>
    <script src="/node_modules/vue/dist/vue.js"></script>
    <script src="/node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        let article ={template:'<div>第 {{$route.params.c}}篇文章</div>'};
        //  /article/2/d
        //  /article/:c/:a =>{c:2,a:'d'} =this.$route.params
        //详情页
        let routes =[//路径参数 表示值必须要有  但是值是随机的
            {path:'/article/:c/:a',component:article}
        ];
        let router = new VueRouter({
            routes
        });
        let vm = new Vue({
            el:'#app',
            router
        })
    </script>

    <div id="app">
        <!-- 如果用对象作为to的属性，并且使用了参数 必须给路由起了个名字，通过名字跳转 -->
        <router-link :to="{name:'pro',params:{c:1,a:2}}">商品1</router-link>
        <router-link to="/article/2/b">商品2</router-link>
        <router-link to="/article/3/c">商品3</router-link>
        <router-view></router-view>
    </div>
    <script src="/node_modules/vue/dist/vue.js"></script>
    <script src="/node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        let article ={
            template:'<div>第 {{$route.params.c}}篇文章</div>',
            watch:{ //路径参数发生变化 监控参数的变化来发送ajax
                $route(){
                    alert('来个ajax');
                }
            }
        };
        //  /article/2/d
        //  /article/:c/:a =>{c:2,a:'d'} =this.$route.params
        //详情页
        let routes =[//路径参数 表示值必须要有  但是值是随机的
            {path:'/article/:c/:a',component:article,name:'pro'}
        ];
        let router = new VueRouter({
            routes
        });
        let vm = new Vue({
            el:'#app',
            router
        })
    </script>

相关属性
to
表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace
设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。
append
设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>

tag
想要渲染成某种标签，例如

。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

active-class
设置链接激活时使用的 CSS 类名。

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

注意这里 class 使用 active_class="_active"
event
声明可以用来触发导航的事件。

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

以上代码设置了 event 为 mouseover ，及在鼠标移动到 Router Link 1 上时导航的 HTML 内容会发生改变。

参考链接：https://www.runoob.com/vue2/vue-routing.html

頑張ってちしじょ

关注

0
点赞
踩
0

收藏

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

解析Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）Vue.js 路由需要载入 vue-router 库中文文档地址：vue-router文档。安装直接下载https://unpkg.com/vue-router/dist/vue-router.jsN...
复制链接

扫一扫