Vue---router

发布时间：2020-12-16 23:19:05 所属栏目：百科来源：网络整理

导读：router的作用就不赘述了主要讲讲Vue中是怎么使用router以及注意事项路由的简单使用 1.引入路由使用router，要用到官方的库 vue-router ?引入vue-router有2种方式：a.模块加载的方式 ?b.script标签引入模块加载： import Vue from "vue" 'vue-router' spa

　　router的作用就不赘述了

　　　　主要讲讲Vue中是怎么使用router以及注意事项

　　　　　　路由的简单使用

　　　　　　1.引入路由

　　　　　　　　使用router，要用到官方的库 vue-router ?引入vue-router有2种方式：a.模块加载的方式 ?b.script标签引入

　　　　　　　　模块加载：

import Vue from "vue"'vue-router'new Vue({
//code
})

　　　　　　一定要按照以上方式严格书写（套路） ?Vue..use是vue的全局方法，用于引入vue相关的插件

　　　　　　script标签引入

　　　　　　　　这个没什么好说的，但注意加载顺序：先vue.js 再 vue-router.js 否则会错（凡是引入vue插件前,先要引入vue.js）

　　　　2.定义组件

var Template = { template:"

你好

" }

　　　　3.定义路由

routers = "/foo"

　　　　跟创建Vue实例类似（据我观察，好像所有的veu插件都是 new一个实例，然后挂载到vue实例上）注意routes选项，很容易写成“routers” ?该选项有两个2参数：path 指定路由“跳转地址” ?component指定加载的组件。

　　　　4.注入路由

　　　　　　路由需要注入到vue实例中，才能使用

routers = "/foo" "#app""dk"'hello'"

hello

　　　　5.在html页面中：

hello,Vue

    <p>
        <router-link to="/bar"&gt;Go to bar</router-link>
        <router-link to="/foo"&gt;Go to foo</router-link>
    </p>
    <router-view></router-view>

　　　router-link标签会默认渲染成“a标签” to属性指定路由的“跳转”地址

　　　router-view用于呈现组件的内容。

　　完整实例：

Document hello,Vue

    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;p</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;router-link </span><span style="color: #ff0000"&gt;to</span><span style="color: #0000ff"&gt;="/bar"</span><span style="color: #0000ff"&gt;></span>Go to bar<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;router-link</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;router-link </span><span style="color: #ff0000"&gt;to</span><span style="color: #0000ff"&gt;="/foo"</span><span style="color: #0000ff"&gt;></span>Go to foo<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;router-link</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;p</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;router-view</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;router-view</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>

</body>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>
//定义组件
var firstCpt = Vue.component('hello',{
template:<div> <p>{{name}}</p> <button @click="send">点击</button> </div>,
 data:function(){
return{
name:"jjk"
}
},methods:{
send:function(){
alert('fuck')
}
}
});

// 定义路由
var routers = new VueRouter({
routes:[
{
path:"/foo",component:firstCpt
}
]
})
//在Vue实例中注入路由
new Vue({
el:"#app",data:{
name:"dk"
},components:{
'hello':{
template:"

hello

"
}
},router:routers
})
</script>
</html>

　　　　动态路由

　　　　　　我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个?User?组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在?vue-router?的路由路径中使用『动态路径参数』

<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">
<h1>hello,Vue</h1>

    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;p</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;router-link </span><span style="color: #ff0000"&gt;to</span><span style="color: #0000ff"&gt;="/user/bar"</span><span style="color: #0000ff"&gt;></span>/user/bar<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;router-link</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;router-link </span><span style="color: #ff0000"&gt;to</span><span style="color: #0000ff"&gt;="/user/foo"</span><span style="color: #0000ff"&gt;></span>/user/foo<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;router-link</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;p</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;router-view</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;router-view</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>

</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; routers </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff"&gt;new</span><span style="background-color: #f5f5f5; color: #000000"&gt; VueRouter({

    routes: [
        { path: </span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;/user/:id</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,component: User }
    ]


});

</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;new</span><span style="background-color: #f5f5f5; color: #000000"&gt; Vue({
    el: </span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;#app</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;,router: routers
})

</script>

</html>

　　　　『路径参数』使用冒号?:?标记。当匹配到一个路由时，参数值会被设置到?this.$route.params，可以在每个组件内使用。于是，我们可以更新?User?的模板，输出当前用户的 ID ??提醒一下，当使用路由参数时，例如从?/user/foo?导航到?user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。验证一下：

　　当点击链接时， mouted钩子函数只执行了一次。

　　嵌套路由

　　　　实际的项目中，通常是多层嵌套的组件组合而成的，通过url参数对应嵌套的各层组件

　　上面的实例在demo.html中

hello,Vue

    <p>
        <router-link to=<span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;/bar</span><span style="color: #800000"&gt;"</span>>Go to bar</router-link>
        <router-link to=<span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;/foo</span><span style="color: #800000"&gt;"</span>>Go to foo</router-link>
    </p>
    <router-view></router-view>
</div></pre>

　　router-view是最顶层的路由，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套?。例如，在?User?组件的模板添加一个?：

User =

User {{ $route.params.id }}

"666"

　　组件User中存在一个路由，要渲染这个路由，需要在VueRouter中设置 children选项

    routes: [
        { path: '/user/:id',component: User,children:[
            {
                path:"index",component:Index
            },{
                path:"home",component:Home
            }
        ] }
    ]


});</span></pre>

　　　　children?配置就是像?routes?配置一样的路由配置数组唯一的区别就是：path选项不需要“/” ?这跟angular不同。

　　完整实例：

    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;p</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;router-link </span><span style="color: #ff0000"&gt;to</span><span style="color: #0000ff"&gt;="/user/bar"</span><span style="color: #0000ff"&gt;></span>/user/bar<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;router-link</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;router-link </span><span style="color: #ff0000"&gt;to</span><span style="color: #0000ff"&gt;="/user/foo"</span><span style="color: #0000ff"&gt;></span>/user/foo<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;router-link</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;router-link </span><span style="color: #ff0000"&gt;to</span><span style="color: #0000ff"&gt;="/user/foo/index"</span><span style="color: #0000ff"&gt;></span>/user/foo/index<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;router-link</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;router-link </span><span style="color: #ff0000"&gt;to</span><span style="color: #0000ff"&gt;="/user/foo/home"</span><span style="color: #0000ff"&gt;></span>/user/foo/home<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;router-link</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;p</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;router-view</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;router-view</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>

</body>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>
var User = {
template: <div> <div>User {{ $route.params.id }}</div> <router-view></router-view> </div> ,mounted:function(){
alert("666");
}
};

</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; Home </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; {
    template:`
    </span><span style="background-color: #f5f5f5; color: #000000"&gt;<</span><span style="background-color: #f5f5f5; color: #000000"&gt;div</span><span style="background-color: #f5f5f5; color: #000000"&gt;></span>
        <span style="background-color: #f5f5f5; color: #000000"&gt;<</span><span style="background-color: #f5f5f5; color: #000000"&gt;div</span><span style="background-color: #f5f5f5; color: #000000"&gt;></span><span style="background-color: #f5f5f5; color: #000000"&gt;home page</span><span style="background-color: #f5f5f5; color: #000000"&gt;<</span><span style="background-color: #f5f5f5; color: #000000"&gt;/</span><span style="background-color: #f5f5f5; color: #000000"&gt;div></span>
        <span style="background-color: #f5f5f5; color: #000000"&gt;<</span><span style="background-color: #f5f5f5; color: #000000"&gt;div</span><span style="background-color: #f5f5f5; color: #000000"&gt;></span><span style="background-color: #f5f5f5; color: #000000"&gt;User {{ $route.params.id }}</span><span style="background-color: #f5f5f5; color: #000000"&gt;<</span><span style="background-color: #f5f5f5; color: #000000"&gt;/</span><span style="background-color: #f5f5f5; color: #000000"&gt;div></span>
    <span style="background-color: #f5f5f5; color: #000000"&gt;<</span><span style="background-color: #f5f5f5; color: #000000"&gt;/</span><span style="background-color: #f5f5f5; color: #000000"&gt;div></span>

`
};

</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; Index </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt;  {
    template:`
    </span><span style="background-color: #f5f5f5; color: #000000"&gt;<</span><span style="background-color: #f5f5f5; color: #000000"&gt;div</span><span style="background-color: #f5f5f5; color: #000000"&gt;></span>
        <span style="background-color: #f5f5f5; color: #000000"&gt;<</span><span style="background-color: #f5f5f5; color: #000000"&gt;div</span><span style="background-color: #f5f5f5; color: #000000"&gt;></span><span style="background-color: #f5f5f5; color: #000000"&gt;index page</span><span style="background-color: #f5f5f5; color: #000000"&gt;<</span><span style="background-color: #f5f5f5; color: #000000"&gt;/</span><span style="background-color: #f5f5f5; color: #000000"&gt;div></span>
        <span style="background-color: #f5f5f5; color: #000000"&gt;<</span><span style="background-color: #f5f5f5; color: #000000"&gt;div</span><span style="background-color: #f5f5f5; color: #000000"&gt;></span><span style="background-color: #f5f5f5; color: #000000"&gt;User {{ $route.params.id }}</span><span style="background-color: #f5f5f5; color: #000000"&gt;<</span><span style="background-color: #f5f5f5; color: #000000"&gt;/</span><span style="background-color: #f5f5f5; color: #000000"&gt;div></span>
    <span style="background-color: #f5f5f5; color: #000000"&gt;<</span><span style="background-color: #f5f5f5; color: #000000"&gt;/</span><span style="background-color: #f5f5f5; color: #000000"&gt;div></span>

`
}

</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; routers </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff"&gt;new</span><span style="background-color: #f5f5f5; color: #000000"&gt; VueRouter({

    routes: [
        { path: </span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;/user/:id</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,children:[
            {
                path:</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;index</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;,{
                path:</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;home</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;,component:Home
            }
        ] }
    ]


});

</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;new</span><span style="background-color: #f5f5f5; color: #000000"&gt; Vue({
    el: </span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;#app</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;,router: routers
})

</script>

</html>

　　　　命名路由

　　　　　　当一个项目中，存在很多路由时，通过一个名称在标志一个路由很更方便标志一个路由可以在VueRouter中，使用name选项给该路由设置名称

routers =

    routes: [
        { path: </span>'/user/:id',name:"user"<span style="color: #000000"&gt;,children:[
            {
                path:</span>"index"<span style="color: #000000"&gt;,{
                path:</span>"home"<span style="color: #000000"&gt;,component:Home
            }
        ] }
    ]


});</span></pre>

　　　　要链接到一个命名路由，可以给?router-link?的?to?属性传一个对象，该对象接收 name--路由名称 params--url参数（对象的形式）

　　　　命名视图

　　　　　　有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有?sidebar（侧导航）和?main（主内容）两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果?router-view?没有设置名字，那么默认为?default。

　　　　一般来说，一个视图对应一个“大”组件（该组件嵌套其他组件）?因此对于同个路由，多个视图就需要多个组件。确保正确使用?components?配置（带上 s）：

const router = '/'

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!