Vue Study [2]: Vue Router
Description
The article for vue router.
Original post link:https://www.cnblogs.com/markjiang7m2/p/10796020.html
Source code:https://gitee.com/Sevenm2/Vue.Web/tree/master/Vue.Router
Start
Actually we should only remember 3 points for vue router.
<router-link>
. For user to click.<router-view>
. To show the related content.- router index.js. Declare which content will be show when user click a link.
<router-link>&
<router-view>is a pair of tags for vue router. They are always used together.
router-link
<router-link>will be compiled into
<a>when we build the project.
There is an important property
toin
<router-link>. It will tell the website which path will be redirected to when user click this link.
Html in App.vue
<ul> <li><router-link to="/" >Home</router-link></li> <li><router-link to="/food" >Food</router-link></li> <li><router-link to="/rating">Rating</router-link></li> <li><router-link to="/seller">Seller</router-link></li> </ul>
It shows that when user click the
Homelink, the website will redirect to path
/, and
Foodlink for path
/food, the same as
Rating,
Seller.
Actually it will be compiled as below.
<ul> <li><a href="#/" >Home</a></li> <li><a href="#/food" >Food</a></li> <li><a href="#/rating">Rating</a></li> <li><a href="#/seller">Seller</a></li> </ul>
router-view
When website redirect to a path, such as
/food, we may want to show something different in somewhere in the page. So we should add the
<router-view>tag to the place which we want to show the related content.
Html in App.vue
<ul> <li><router-link to="/" >Home</router-link></li> <li><router-link to="/food" >Food</router-link></li> <li><router-link to="/rating">Rating</router-link></li> <li><router-link to="/seller">Seller</router-link></li> </ul> <router-view></router-view>
So if the related content is
<div>Food content</div>, it will show in html as below.
<ul> <li><a href="#/" >Home</a></li> <li><a href="#/food" >Food</a></li> <li><a href="#/rating">Rating</a></li> <li><a href="#/seller">Seller</a></li> </ul> <div>Food content</div>
router index.js
As above, we say that
<router-view>tag will be replaced by the related content, but what is the related content?
The route rule will be declared in the router index.js file. We can find this file in the path
src\router\index.jsas below.
In the index.js file, I have declared the rule.
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/food', component: { template: '<div>Food content</div>' } }, { path: '/seller', component: { template: '<div>Seller content</div>' } }, { path: '/rating', component: { template: '<div>Rating content</div>' } } ] })
As above, path
/foodrelated content is
<div>Food content</div>.
The result will be shown as below.
Path
/
We can see that the tag
<router-view>is replaced as empty currently.
Path
/food
We can see that the tag
<router-view>is replaced by
<div>Food content</div>currently.
In our actual development, we always have a lot of content to show in the tag
<router-view>, so vue support to declare an individual component.
food.vue
<template> <div class="content"> <div>Food content</div> <!-- more other contents --> </div> </template> <script> export default { name: 'food', data () { return { msg: 'food' } } } </script>
And then we can import these components in router index.js
import Vue from 'vue' import Router from 'vue-router' import food from '@/components/food' import seller from '@/components/seller' import rating from '@/components/rating' Vue.use(Router) export default new Router({ routes: [ { path: '/food', component: food }, { path: '/seller', component: seller }, { path: '/rating', component: rating } ] })
Dynamic Route Matching
Based on the above 3 route points, we can do some more extensions.
If our different paths are based on a parameter, such as an id, we can use a colon
:to declare just one route in the index.js
import Vue from 'vue' import Router from 'vue-router' import food from '@/components/food' Vue.use(Router) export default new Router({ routes: [ { path: '/:id', name: 'food', component: food } ] })
And in the component, we can use
this.$route.paramsto get the parameter's value.
<template> <div class="content"> <div>{{$route.params.id}} content</div> </div> </template> <script> export default { name: 'food', data () { return { msg: this.$route.params.id } } } </script>
Nested Routes
Sometimes, we may want to show some differences with different path based on food component. Then we should use the nested routes.
Firstly, I add a subfood component with a parameter.
<template> <div class="subcontent"> <div>Sub Food content</div> <div>{{$route.params.id}}</div> </div> </template> <script> export default { name: 'subfood', data () { return { msg: 'subfood' } } } </script>
Secondly, we add links in food component, so that we can visit the subfood component.
<div>Food content</div> <div class="subnavbar"> <ul> <li><router-link to="/food/subfood1">SubFood1</router-link></li> <li><router-link to="/food/subfood2">SubFood2</router-link></li> <li><router-link to="/food/subfood3">SubFood3</router-link></li> </ul> <router-view></router-view> </div>
And in the router index.js, we should a children property in
/foodsection.
{ path: '/food', component: food, children:[ { path: '/food/:id', component: subfood } ] }
The result is as below.
In this case, maybe some of you will think that as the subfood path includ
/food, so its content will show in food component's
<router-view>.
However, all results are because of the router index.js declaration. We can make an example as below.
Delcare the subfood path in root.
{ path: '/food', name: 'food', component: food }, { path: '/seller', name: 'seller', component: seller }, { path: '/rating', name: 'rating', component: rating }, { path: '/food/:id', name: 'subfood', component: subfood }
We can see that the subfood component is shown in the root's
<router-view>.
The sub component will be shown in its parent component's
<router-view>. If the component path is declared in root, it will be shown in the root's
<router-view>
Named Routes
We can add a name property in router index.js.
{ path: '/food', name: 'food', component: food, children:[ { path: '/food/:id', name: 'subfood', component: subfood } ] }
Then we can use the named routes in
<router-link>. Remember, we should a colon
:before
toproperty.
The below syntax are the same result.
<li><router-link :to="{name: 'food'}" >Food</router-link></li> <li><router-link to="/food" >Food</router-link></li>
If there is an parameter in the path.
<li><router-link :to="{ name: 'food', params: { id: subfood1 }}" >Food</router-link></li>
Named Views
Sometimes we need to show multiple contents in the same time. Then we should add a name property for different
</router-view>.
Firstly, I add a subextend component.
<template> <div class="subcontent"> <div>Sub Extend content</div> <div>{{$route.params.id}}</div> </div> </template> <script> export default { name: 'subextend', data () { return { msg: 'subextend' } } } </script>
Secondly, add a
</router-view>in food component.
<div class="subnavbar"> <ul> <li><router-link to="/food/subfood1">SubFood1</router-link></li> <li><router-link to="/food/subfood2">SubFood2</router-link></li> <li><router-link to="/food/subfood3">SubFood3</router-link></li> </ul> <router-view></router-view> <router-view name="ex"></router-view> </div>
The next is router index.js. As there are multiple components, we should use property components, pls. noted the s.
The default component will be shown in
</router-view>without name property and the ex component will be shown in
</router-view>with name property value as "ex".
{ path: '/food', name: 'food', component: food, children:[ { path: '/food/:id', name: 'subfood', components: { default: subfood, ex: subextend } } ] }
The result is as below.
Redirect in js
Sometimes we should do some logic judgement in js and then we could determine which path we could redirect to. We can use
this.$router.push()to do this in js.
this.$router.push({ name: 'food', params: { id: "subfood1" }}); this.$router.push("/food/subfood1");
404 Error Page
When user want to access a Url which is not nonexistent, then we should redirect to a 404 page.
First, we add a 404 component.
<template> <div class="content"> <div>404 Error</div> </div> </template> <script> export default { name: 'error404', data () { return { msg: '404' } } } </script>
Then add the route in router index.js. As we should catch all unknown Url, we should declare the route in root.
export default new Router({ routes: [ { path: '*', name: 'error404', component: error404 }, { path: '/food', name: 'food', component: food } ... ] })
Then we run the application and have a look.
We will find that when we access the root path, we get a 404 view. It is not the result we want.
It is because we donot declare the root view in router index.js. Let me to add it.
I add a home component and then declare it as the root view.
export default new Router({ routes: [ { path: '*', name: 'error404', component: error404 }, { path: '/', name: 'home', component: home }, { path: '/food', name: 'food', component: food } ... ] })
Then have a look.
It shows correctly now. When we access an unknown Url, the website will show the 404 view.
Maybe someone will say why the page will still show the menu in top. We should know that the elements in App.vue will always be shown. If we just want to show 404 view when we access an unknown page, we should move the menu elements into home component, and declare the menu components as children in home path.
home.vue
<template> <div class="content"> <header> <nav class='navbar'> <ul> <li><router-link to="/" >Home</router-link></li> <li><router-link to="/food" >Food</router-link></li> <li><router-link to="/rating">Rating</router-link></li> <li><router-link to="/seller">Seller</router-link></li> </ul> <router-view></router-view> </nav> </header> </div> </template> <script> export default { name: 'home', data () { return { msg: 'home' } } } </script>
router index.js
{ path: '/', name: 'home', component: home, children:[ { path: '/food', name: 'food', component: food, children:[ { path: '/food/:id', name: 'subfood', components: { default: subfood, ex: subextend } } ] }, ... ] }
Then the website will only show 404 view when we access an unknown Url.
Alias
As above, when we access the root path, it shows nothing in the RouterView. Actually sometimes we should show something, such as dashboard in the root path. How can we do this?
There is a property
Aliasin router. More uage description can be found in Vue.
Here we could only focus on the definition.
An alias of /a
as /b
means when the user visits /b
, the URL remains /b
, but it will be matched as if the user is visiting /a
.
We know that a path begin with
/means an absolute path, without
/means a relative path. So we can declare a child in home view and set
aliasas
''or
/. It means when we access
/, we are actually accessing
/food.
{ path: '/', name: 'home', component: home, children:[ { path: '/food', name: 'food', alias: '/', component: food, children:[ { path: '/food/:id', name: 'subfood', components: { default: subfood, ex: subextend } } ] }, ... ] }
HTML5 History Mode
Maybe you have found that all our Urls are including
#. It's not a good link with
#. Is there any way to remove this char? Sure. The HTML5 History Mode will help us. More uage description can be found in Vue.
We can set mode value as
historyin router index.js and then run the application. We can get a Url without
#.
export default new Router({ mode: 'history', routes: [ ... ] })
Build Setup command line
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test
作者:markjiang7m2 出处:https://www.cnblogs.com/markjiang7m2/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
|
关注 - 0
粉丝 - 6 我在关注他 取消关注 0 0 « 上一篇:Vue Study [1]: Vue Setup
» 下一篇:How to download a file with plus symbol(+) filename in IIS?
- VueJs(12)---vue-router(导航守卫,路由元信息,获取数据)
- Vue2项目架构搭建(八)—— vue-router2路由配置和调用
- vue项目开发实战(三)——vue-router
- vue-router 导航守卫
- 第五,vue-router命名路由和命名视图(以及学完vue-router总结)
- vue-router 之命名路由
- vue2+vuex+vue-router 快速入门(三) vue 实例介绍
- vue.js路由配置vue-router的基础学习 - 概念篇
- vue-router的两种模式的区别
- vue-router路由懒加载和权限控制详解
- vue-router改写一下导入路由
- VueJs路由跳转——vue-router的使用
- vue-router用法
- vue vuex vue-router vue-resource 简单的搭建一个 vue 小项目
- vue2.0填坑之--不显示router-view
- vue-router 创建 vue 单页应用示例
- 使用Vue-Router 2实现路由功能
- vue-router的HTML5 History 模式设置
- vue-router中参数传递 && 编程式导航 && 坑 && beforeRouteEnter
- Vue-router的配置以及实战(易错点)