您的位置：首页 > 产品设计 > UI/UE

vue-router的学习笔记--2

2018-02-12 10:56 736 查看
       今天学习了关于vue-router的知识，其实在vue2里router的操作并没有变化，用它来创建单页应用是非常简单的，只要配置组建和路由映射，然后告诉vue-router在那里渲染它就可以了。

第一个小实例:

JavaScript里可以简单的分成4个步骤来写和添加一个路由器：定义路由组件
定义路由
创建router实例
创建和挂载实例
下边我们看一下代码，这个代码非常简单：
1234567891011121314151617181920212223242526<!DOCTYPE html><html lang="en">    <head>        <meta charset ="UTF-8">        <title>VueJS</title>        <script  src="./vue.js" ></script>        <script  src="./bower_components/vue-router/dist/vue-router.js"></script>            </head>    <body>        <div id="app">            <h1>Hello App!</h1>            <p>                <!--使用 router-link 组建来导航-->                <!--通过传入 `to` 属性指定链接-->                <!--<router-link>默认会被渲染成一个`<a>`标签-->                <router-link to='/foo'>Go to Foo</router-link>                <router-link to='/bar'>Go to Bar</router-link>            </p>            <!--路由出口-->            <!--路由匹配到的组件将渲染在这里-->            <router-view></router-view>        </div>        <script src="./index.js"></script>    </body></html>
JS代码
12345678910111213141516171819202122232425//1.定义路由组建//可以从其他文件import 进来const Foo = { template:'<div>foo</div>'};const Bar = { template:'<div>bar</div>'}; //2.定义路由，每个路由应该映射一个组建。其中“component”可以是通过Vue.extend()创建的组件构造器，//或者，只是一个组件配置对象。//我们晚点再条路嵌套路由 const routes =[    {path:'/foo',component:Foo},    {path:'/bar',component:Bar}]; //3.创建router实例，然后传·routers·配置//你还可以传别的配置参数，不过先这么简单着吧const router = new VueRouter({    routes}); //4.创建和挂载跟实例。记得要通过router配置参数注入路由，从而让整个应用都有路由功能var app = new Vue({    el: '#app',    router});
再写这段代码中我犯了一个错误，就是把index.js这个脚本文件放到了<head>标签里，然后测试时出现了[Vue warn]: Cannot find element: #app 的错误提示，效果也没有出来，其实这是一个很简单的错误，只要把index.js放到所有DOM的最后，等dom加载完就不会出现这样的错误。

第二个小实例（动态路由）：

所谓的动态路由，就是在路由里传参数，比如我们作电商网站的时候，经常用的商品详细页，就是一个典型用到动态路由案例，每个商品都不一样，但是打开来的模板是一样的。
比如我们有个user页面，我们后边设置两个链接，但是都是用的User模板，却显示的内容不同。关键语法是“：id”，这里的id代表参数。我们来看一下代码吧，代码中我加了详细的注释。html代码
1234567891011121314151617181920212223<!DOCTYPE html><html lang="en">    <head>        <meta charset ="UTF-8">        <title>VueJS</title>        <script  src="./vue.js" ></script>        <script  src="./bower_components/vue-router/dist/vue-router.js"></script>                      </head>    <body>        <div id="app">           <p>               <!--都是调用user模板，但是后边的参数不一样，显示的内容也不一样-->               <router-link to='/user/foo'>/user/foo</router-link>               <router-link to='/user/bar'>/user/bar</router-link>           </p>           <!--显示的内容区域-->           <router-view></router-view>        </div>      <script src="./index.js"></script>    </body></html>
js代码
12345678910111213//这里只定义了一个user模板组件const User={template:'<div>User {{$route.params.id}}</div>'}; // 定义路由，component代表上面的路由组建const routes=[{path:'/user/:id',component:User}]; //实例化routerconst router = new VueRouter({    routes}); //实例化Vue和挂载路由const app = new Vue({router}).$mount('#app');
注意：在写这段代码的时候，注意定义的路由 要写成  const routes    而不是  const routers    。不知道为什么会出现这种情况，路由效果是出不来的，而且也不报错。正确写法
1234567// 定义路由，component代表上面的路由组建const routes=[{path:'/user/:id',component:User}]; //实例化routerconst router = new VueRouter({    routes});
错误写法：
1234567// 定义路由，component代表上面的路由组建const routers=[{path:'/user/:id',component:User}];//这里的routes写成了routers //实例化routerconst router = new VueRouter({    routers//跟随上边，不知道为什么不来结果，也不报错});
这个问题，我会继续跟进的…..

第三个小实例（嵌套路由）

我们在开发中大多数是嵌套路由，所以这个操作也是最常用的。嵌套路由的语法就是在制作路由代码是加childern参数。html代码：
123456789101112131415161718192021<!DOCTYPE html><html lang="en">    <head>        <meta charset ="UTF-8">        <title>VueJS</title>        <script  src="./vue.js" ></script>        <script  src="./bower_components/vue-router/dist/vue-router.js"></script>                      </head>    <body>            <div id="app">           <router-link to="/user/foo">Go to Foo</router-link>           <router-link to="/user/foo/profile">Go to profile</router-link>           <router-link to="/user/foo/posts">Go to posts</router-link>           <router-view></router-view>       </div>      <script src="./index.js"></script>    </body></html>
JS代码，里边有详细的注释
123456789101112131415161718192021222324252627282930313233343536373839404142const User = {    template:'<div class="user"><h2>User {{$route.params.id}}</h2><router-view></router-view></div>'};const UserProfile={    template:'<div>UserProfile</div>'};const UserPosts ={    template :'<div>UserPosts</div>'};const UserNull ={    template:'<div>UserNull</div>'}//嵌套路由的组要配置是在这里//在里边加入childern[]来配置多个嵌套的路由。//可以配置一个空，来避免没有参数时的错误。const routes=[        {   path:'/user/:id',            component:User,            children:[                {                    path:'',                    component:UserNull                },                {                    path:'profile',                    component:UserProfile                },                {                    path:'posts',                    component:UserPosts                }            ]        }    ];const router =new VueRouter({    routes}); const app = new Vue({    el:'#app',    router});

编程式导航

我们在JavaScript中写业务逻辑时，进场需要跳转页面，比如我们在登陆时，输入了用户名和密码点击登录按钮，如果登陆成功我们需要跳转新内容。这时候就需要通过编写代码来实现。router.push(location)想要导航到不同的URL，则使用router.push方法。这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的URL。当你点击<router-link>时，这个方法会在内部调用，所以说，点击<router-link :to=”…”>等同于调用router.push(…);
12345678//字符串router.push('home');//对象router.push({path:'home'});//命名的路由router.push({name:'user',params:{userId:123}})//带查询参数，变成 /register?plan=privaterouter.push({path:'register',query:{plan:'private'}})
router.replace(location)跟router.push很像，唯一的不同就是，它不会向history添加新纪录，而是跟它的方法名一样–替换掉当前的history记录。

命名视图

有时间想同时展示多个视图，而不是嵌套展示，例如创建一个布局，有sidebar和main两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果router-view 没有设置名字，那么默认为default。下边就是官方提供的例子：html文件
123456789101112131415161718192021222324252627<!DOCTYPE html><html lang="en">    <head>        <meta charset ="UTF-8">        <title>VueJS</title>        <script  src="./vue.js" ></script>        <script  src="./bower_components/vue-router/dist/vue-router.js"></script>                      </head>    <body>      <div id="app">          <div id="app">              <h1>Named Views</h1>          </div>          <ul>              <li><router-link to="/">/</router-link></li>              <li><router-link to="/other">/other</router-link></li>          </ul>          <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>      </div>             <script src="./index.js"></script>    </body></html>
js文件
1234567891011121314151617181920212223242526272829303132333435const Foo = { template:'<div>foo</div>'}const Bar = { template:'<div>bar</div>'}const Baz = { template:'<div>baz</div>'}  const router= new VueRouter({    mode:'history',     //一个视图使用一个组建渲染，    //因此对于同个路由，多个视图就需要多个组件。    //确保正确使用components 配置（带上s）    routes:[{        path:'/',        components:{            default:Foo,            a:Bar,            b:Baz        }    },    {        path:'/other',        components:{            default:Baz,            a:Bar,            b:Foo        }    }        ]}); new Vue({    router,    el:'#app'});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航