vue-router 其他

项目前导 学习笔记

一、匹配 404 错误

        在路由规则中，* 代表的是任意字符。所以只要在路由的最后添加一个 * 路由，那么以后没有匹配到的url都会被导入到这个视图中。

	<script>
	...
		var UserProfile = {template:"<h1>个人中心：{{$route.params.userid}}</h1>"};
		var NotFound = {template: "<h1>您找的页面已经到火星啦！</h1>"}
		var routes = [
		    {path: "/user/:userid",component: UserProfile},
		    
		    // 上面的都匹配完了都找不到, 再返回 404, 所以放在最后
		    {path: "*",component: NotFound},
		]
	...
	</script>

---

二、嵌套路由

        有时候在路由中，主要的部分是相同的，但是下面可能是不同的。比如访问用户的个人中心是 /user/111/profile/，查看用户发的贴子是 /user/111/posts/ 等。这时候就需要使用到嵌套路由。

	<script>
	    var index = Vue.extend({ template: "<h1>首页</h1>" })
	    var user = Vue.extend({
	        template:
	        `
	          <div>
	            <h1>个人中心</h1>
	            <ul class="nav nav-tabs">
	              <li role="presentation" class="active">
	                  <router-link to="/user/123/message">信息</router-link>
	              </li>
	              <li role="presentation">
	                  <router-link to="/user/123/setting">设置</router-link>
	              </li>
	            </ul>
	            <div class="container">
	                <!--  注意这里也要有路由出口  -->
	                <router-view></router-view>
	            </div>
	          </div>
	        `
	    })
	    var message = Vue.extend({ template: "<h1>信息</h1>" })
	    var setting = Vue.extend({ template: "<h1>设置</h1>" })
	
	    var router = new VueRouter({
	        routes: [
	            { path: "/", component: index },
	            {
	                path: "/user/:userid",
	                component: user,
	                children: [
	                    // 这里的路径都是 /user:userid 下的, 所以不用写全
	                    { path: "message", component: message },
	                    { path: "setting", component: setting },
	                    // 默认显示页面
	                    { path: "", component: message },
	                ]
	            },
	        ]
	    })
	
	    new Vue({
	        el: "#app",
	        router: router
	    });
	</script>

---

三、编程式导航

        之前使用 <router-link> 可以在用户点击的情况下进行页面更新。但有时候我们想要在 js 中手动的修改页面的跳转，这时候就需要使用编程式导航了。

        想要导航到不同的 URL，则使用 $router.push 方法。这个方法会向 history 栈添加一个新的记录（就是能实现页面前进后退功能），所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

        当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

    <div id="app">
        <button @click="goprev">上一步</button>
        <button @click="gotoLis">列表</button>
        <button @click="gotoProfile">个人中心</button>
        <button @click="login">登录</button>
        <button @click="gonext">下一步</button>
        <router-view></router-view>
    </div>


	<script>
	    var lis = Vue.extend({ template: "<h1>列表</h1>" })
	    var profile = Vue.extend({ template: "<h1>个人中心{{$route.params.userid}}</h1>" })
	    var login = Vue.extend({ template: "<h1>登录</h1>" })
	    var router = new VueRouter({
	        routes: [
	            {path: "/lis", component: lis},
	            {path: "/profile/:userid", component: profile, name: "myprofile"},
	            {path: "/login", component: login},
	        ]
	    });
	
	    new Vue({
	        el: "#app",
	        router: router,
	        methods: {
	            gotoLis(){
	                // 字符串 地址格式：/lis
	                this.$router.push("/lis")
	            },
	            gotoProfile(){
	                // 对象 地址格式：/profile/123
	                this.$router.push({ name: "myprofile", params:{userid:"123"} })
	            },
	            login(){
	                // 地址格式：/login?wd=SignIn
	                this.$router.push({ path: "login", query:{wd:"SignIn"} })
	            },
	            goprev(){
	            	// 上一步
	                this.$router.go(1)
	            },
	            gonext(){
	            	// 下一步
	                this.$router.go(-1)
	            }
	        }
	    });
	</script>

	router.replace(location, onComplete?, onAbort?)

        跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

---

四、命名路由

        有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

  ...
	<!--  注意 to 前面要有 : , 即 v-bind:  -->
	<router-link :to="{ name: 'user'">User</router-link>
  ...
  ...
	var router = new VueRouter({
	  routes: [
	    {
	      path: '/user/:userId',
	      name: 'user',
	      component: User
	    }
	  ]
	})
  ...

要链接到一个命名路由，可以给router-link的to属性传一个对象：

	<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

这跟代码调用 router.push() 是一回事：

	router.push({ name: 'user', params: { userId: 123 }})

---

五、命名视图

        有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 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)：

    Foo= Vue.extend({template:"<h1>Foo 部分</h1>"})
    Bar= Vue.extend({template:"<h1>Bar 部分</h1>"})
    Baz= Vue.extend({template:"<h1>Baz 部分</h1>"})
	const router = new VueRouter({
	  routes: [
	    {
	      path: '/',
	      components: {
	        default: Foo,
	        a: Bar,
	        b: Baz
	      }
	    }
	  ]
	})

---

五、重定向和别名

1. 重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

    var article = Vue.extend({template:"<h1>我是文章列表</h1>"})
    var router = new VueRouter({
        routes: [
            // redirect 重定向 
            {path:"/", redirect:"/article"},
            {path:"/article", component: article},
        ]
    })

2. 重定向的目标也可以是一个命名的路由：

	const router = new VueRouter({
	  routes: [
	    { path: '/a', redirect: { name: 'foo' }}
	  ]
	})

3. 别名
   
           “重定向” 的意思是，当用户访问 /a 时，URL 将会被替换成 /b，然后匹配 路由 为 /b，那么 “别名” 又是什么呢？
   
           /a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

	// 上面对应的路由配置为：
	
	const router = new VueRouter({
	  routes: [
	    { path: '/a', component: A, alias: '/b' }
	  ]
	})

---

更多内容请参考 vue-router 官方文档：https://router.vuejs.org/zh/