40_实现路由跳转的方法

作者: CHENPEIHUANG | 来源:发表于2018-02-23 22:09 被阅读0次

40_实现路由跳转的方法
26.vue-router的使用2
Flutter - 页面跳转(路由)、传值
路由模块
实现路由跳转
Android组件化专题 - 路由框架进阶模块间的业务通信
$route和$router的区别
ARouter路由解析
深入解析阿里巴巴ARouter路由
Next.js 跳转传参并接收接参

方法一

<!DOCTYPE html>
<html lang="zh">
<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>
</head>
<body>
    <div id="app">
        <router-link to="home">主页</router-link>
        
        <router-view></router-view>
    </div>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <script>
        const Home = {
            template:"<div><h1>主页AAA</h1></div>"
        }
        
        const router = new VueRouter({
            routes:[
                {
                    path:'/home',
                    component:Home,
                    name:'home'
                    
                }
            ]
        })
        var vm = new Vue({
            el:"#app",
            router
            
        })
    </script>
</body>
</html>

方法二

<!DOCTYPE html>
<html lang="zh">
<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>
</head>
<body>
    <div id="app">
        <router-link :to="{name:'home'}">主页</router-link>
        
        <router-view></router-view>
    </div>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <script>
        const Home = {
            template:"<div><h1>主页AAA</h1></div>"
        }
        
        const router = new VueRouter({
            routes:[
                {
                    path:'/home',
                    component:Home,
                    name:'home'
                    
                }
            ]
        })
        var vm = new Vue({
            el:"#app",
            router
            
        })
    </script>
</body>
</html>

方法三

<!DOCTYPE html>
<html lang="zh">
<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>
</head>
<body>
    <div id="app">
        <strong @click="changeView">主页</strong>
        
        <router-view></router-view>
    </div>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <script>
        const Home = {
            template:"<div><h1>主页AAA</h1></div>"
        }
        
        const router = new VueRouter({
            routes:[
                {
                    path:'/home',
                    component:Home,
                    name:'home'
                    
                }
            ]
        })
        var vm = new Vue({
            el:"#app",
            router,
            methods:{
                changeView(){
                    this.$router.push('/home')//设置路由，匹配path属性
                }
            }
            
        })
    </script>
</body>
</html>

方法四

<!DOCTYPE html>
<html lang="zh">
<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>
</head>
<body>
    <div id="app">
        <router-link :to="{name:'home'}">主页</router-link>
        
        <router-view></router-view>
    </div>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <script>
        const Home = {
            template:"<div><h1>主页AAA</h1></div>"
        }
        
        const router = new VueRouter({
            routes:[
                {
                    path:'/home',
                    component:Home,
                    name:'home'
                    
                }
            ]
        })
        var vm = new Vue({
            el:"#app",
            router,
            methods:{
                changeView(){
                    this.$router.push({name:'home'})
                }
            }
            
        })
    </script>
</body>
</html>