Vue---router
Posted 游鱼与渔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue---router相关的知识，希望对你有一定的参考价值。
router的作用就不赘述了
主要讲讲Vue中是怎么使用router以及注意事项
路由的简单使用
1.引入路由
使用router，要用到官方的库 vue-router 引入vue-router有2种方式：a.模块加载的方式 b.script标签引入
模块加载：
import Vue from "vue"; import VueRouter from \'vue-router\'; //实例化Vue之前，一定要有这一句代码 Vue.use(VueRouter); new Vue({ //code
})
一定要按照以上方式严格书写（套路） Vue..use是vue的全局方法，用于引入vue相关的插件
script标签引入
这个没什么好说的，但注意加载顺序：先vue.js 再 vue-router.js 否则会错 （凡是引入vue插件前,先要引入vue.js）
2.定义组件
<script>
var Template = {
template:"<p>你好<p>"
}
</script>
3.定义路由
var routers = new VueRouter({ routes:[ { path:"/foo", component:firstCpt } ] })
跟创建Vue实例类似（据我观察，好像所有的veu插件都是 new一个实例，然后挂载到vue实例上） 注意routes选项，很容易写成“routers” 该选项有两个2参数：path 指定路由“跳转地址” component指定加载的组件。
4.注入路由
路由需要注入到vue实例中，才能使用
// 定义路由 var routers = new VueRouter({ routes:[ { path:"/foo", component:firstCpt } ] }) //在Vue实例中注入路由 new Vue({ el:"#app", data:{ name:"dk" }, components:{ \'hello\':{ template:"<p>hello</p>" } }, router:routers })
5.在html页面中：
<div id="app">
<h1>hello,Vue</h1>
<p>
<router-link to="/bar">Go to bar</router-link>
<router-link to="/foo">Go to foo</router-link>
</p>
<router-view></router-view>
</div>
router-link标签会默认渲染成“a标签” to属性指定路由的“跳转”地址
router-view用于呈现组件的内容。
完整实例：
<!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> </head> <body> <div id="app"> <h1>hello,Vue</h1> <p> <router-link to="/bar">Go to bar</router-link> <router-link to="/foo">Go to foo</router-link> </p> <router-view></router-view> </div> </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:"<p>hello</p>" } }, router:routers }) </script> </html>
动态路由
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』
<!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> </head> <body> <div id="app"> <h1>hello,Vue</h1> <p> <router-link to="/user/bar">/user/bar</router-link> <router-link to="/user/foo">/user/foo</router-link> </p> <router-view></router-view> </div> </body> <script src="./js/vue.js"></script> <script src="./js/vue-router.js"></script> <script> var User = { template: `<div>User {{ $route.params.id }}</div>` } var routers = new VueRouter({ routes: [ { path: \'/user/:id\', component: User } ] }); new Vue({ el: "#app", router: routers }) </script> </html>
『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。验证一下：
当点击链接时， mouted钩子函数只执行了一次。
嵌套路由
实际的项目中，通常是多层嵌套的组件组合而成的，通过url参数对应嵌套的 各层组件
上面的实例 在demo.html中
<div id="app"> <h1>hello,Vue</h1> <p> <router-link to="/bar">Go to bar</router-link> <router-link to="/foo">Go to foo</router-link> </p> <router-view></router-view> </div>
router-view是最顶层的路由，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>。例如，在 User 组件的模板添加一个 <router-view>：
var User = { template: ` <div>User {{ $route.params.id }}</div> <router-view></router-view> `, mounted:function(){ alert("666"); } }
组件User中存在一个路由，要渲染这个路由，需要在VueRouter中设置 children选项
var routers = new VueRouter({
routes: [
{ path: \'/user/:id\', component: User,
children:[
{
path:"index",
component:Index
},
{
path:"home",
component:Home
}
] }
]
});
children 配置就是像 routes 配置一样的路由配置数组 唯一的区别就是：path选项不需要“/” 这跟angular不同。
完整实例：
<!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> </head> <body> <div id="app"> <h1>hello,Vue</h1> <p> <router-link to="/user/bar">/user/bar</router-link> <router-link to="/user/foo">/user/foo</router-link> <router-link to="/user/foo/index">/user/foo/index</router-link> <router-link to="/user/foo/home">/user/foo/home</router-link> </p> <router-view></router-view> </div> </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"); } }; var Home = { template:` <div> <div>home page</div> <div>User {{ $route.params.id }}</div> </div> ` }; var Index = { template:` <div> <div>index page</div> <div>User {{ $route.params.id }}</div> </div> ` } var routers = new VueRouter({ routes: [ { path: \'/user/:id\', component: User, children:[ { path:"index", component:Index }, { path:"home", component:Home } ] } ] }); new Vue({ el: "#app", router: routers }) </script> </html>
命名路由
当一个项目中，存在很多路由时，通过一个名称在标志一个路由很更方便 标志一个路由可以在VueRouter中，使用name选项给该路由设置名称
var routers = new VueRouter({ routes: [ { path: \'/user/:id\', component: User,name:"user", children:[ { path:"index", component:Index }, { path:"home", component:Home } ] } ] });
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象，该对象接收 name--路由名称 params--url参数（对象的形式）
<router-link :to="{ name: \'user\', params: { id: 123 }}">User</router-link>
命名视图
有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。
<router-view class="view one"></router-view> <router-view class="view two" name="a"></router-view> <router-view class="view three" name="b"></router-view>
一般来说，一个视图对应一个“大”组件（该组件嵌套其他组件） 因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置（带上 s）：
const router = new VueRouter({ routes: [ { path: \'/\', components: { default: Foo, a: Bar, b: Baz } } ] })
以上是关于Vue---router的主要内容，如果未能解决你的问题，请参考以下文章