Use the vue-router module
Install the vue-router library before using vue-router
cnpm install vue-router –save
Three elements of vue-router:
Routing map refers to the mapping relationship between routes and components;
routing view refers to the rendering position of components corresponding to route mapping;
routing navigation refers to the navigation link that can change the address bar.
1. Route map
import Vue from 'vue'
import App from './App'
//1、在入口文件main.js里引入
import VRouter from 'vue-router'
Vue.config.productionTip = false
//2、用全局方法use()来注册使用vue-router
Vue.use(VRouter);
//4、实例化全局router
let router=new VRouter({
//以下是路由map
routes:[
{
path:'/apple',
component:Apple
},
{
path:'/banana',
component:Banana
}
]
});
new Vue({
el: '#app',
router,
//3、注册组件
components: {
App,VRouter},
template: '<App/>'
})
Added: default path for routing
By default, entering the home page of the website, we want to render the content of the home page. How can the path jump to the homepage by default and render the homepage component?
You only need to configure one more mapping:
redirect is a redirect, that is, redirect the root path to the /home path, so that when you open the page, the content of the home page will be displayed by default.
2. Routing view
<router-view></router-view>
3. Routing navigation <router-link>
(In vue2.0, the original v-link instruction has been replaced by the <router-link> component)
4 methods of routing navigation:
Method 1: <router-link> Create a tag to define the navigation link
router-link triggers router.push(location) by default. If replace is set, router.replace(location) is triggered. router.replace will not leave history records after navigation, that is, it cannot return to the previous page
to The value can be a string path, or an object describing the address, such as:
// 字符串
<router-link to="home">home</router-link>
// 对象
<router-link :to="{path:'home'}">home</router-link>
// 命名路由
<router-link :to="{name: 'homename'}">home</router-link>
//直接路由带查询参数query，地址栏变成 /home?ids=111
<router-link :to="{path: 'home', query: {ids: '111' }}">home</router-link>
// 命名路由带查询参数query，地址栏变成/home?ids=111
<router-link :to="{name: 'homename', query: {ids: '111'}}">home</router-link>
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
<router-link :to="{path: 'home', params: {ids: '111' }}">home</router-link>
// 命名路由带路由参数params，地址栏是/apple/111
<router-link :to="{name: 'homename', params: { ids: '111' }}">home</router-link>
Method 2: router.push method
This method will add a new record to the history stack, so when the user clicks the browser's back button, it returns to the previous url.
The value in the router.push() method can also be a string path, or an object describing the address, similar to the rules in the above to.
// 字符串
router.push('home')
// 对象
router.push({
path:'home'})
// 命名路由
router.push({
name: 'homename'})
//直接路由带查询参数query，地址栏变成 /home?ids=111
router.push({
path: 'home', query: {
ids: '111'}})
// 命名路由带查询参数query，地址栏变成/home?ids=111
router.push({
name: 'homename', query: {
ids: '111'}})
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
router.push({
path:'homename', params:{
ids: '111'}})
// 命名路由带路由参数params，地址栏是/home/111
router.push({
name:'homename', params:{
ids: '111'}})
Method 3: router.replace()
It has the same function as router.push, but it will not add new records to history, but replace the current history records just like its method name. So no history record will be left after navigation, that is, you cannot go back to the previous page
Method 4: router.go(n)
The parameter of this method is an integer, which means how many steps forward or backward in the history record, similar to window.history.Go(n)
Notice:
1. When passing parameters through params, you can only use name:'/xxx' instead of path:'/xxx', otherwise Undefined will appear when receiving parameters; because params can only use name to import routes, query uses path, name can be imported.
2. In general, if parameters are passed through the query method, the parameters passed before the refresh can still be obtained after refreshing the page. However, when parameters are passed through params, the parameters will be lost and Undefined will appear after the refresh.
But what should I do if I want the simplicity of params on the address bar and want to refresh the query without losing the parameters?
Then we need to declare parameters for the route on the basis of params, and it will not be lost after refreshing
Example: add ":id"
{
path: '/XXXX/:id',
name: 'XXXX',
component: component
},
Effect:
This way of declaring parameters on the route, when using jumps, you need to add parameters, otherwise nothing will be displayed on the page after the jump! ! !
3. Get parameter method:
in the component: {
{$route.params.ids }}、{
{$route.query.ids}}
in js:this.$route.params.ids、this.$route.query.ids