link1918 link1919 link1920 link1921 link1922 link1923 link1924 link1925 link1926 link1927 link1928 link1929 link1930 link1931 link1932 link1933 link1934 link1935 link1936 link1937 link1938 link1939 link1940 link1941 link1942 link1943 link1944 link1945 link1946 link1947 link1948 link1949 link1950 link1951 link1952 link1953 link1954 link1955 link1956 link1957 link1958 link1959 link1960 link1961 link1962 link1963 link1964 link1965 link1966 link1967 link1968 link1969 link1970 link1971 link1972 link1973 link1974 link1975 link1976 link1977 link1978 link1979 link1980 link1981 link1982 link1983 link1984 link1985 link1986 link1987 link1988 link1989 link1990 link1991 link1992 link1993 link1994 link1995 link1996 link1997 link1998 link1999 link2000 link2001 link2002 link2003 link2004 link2005 link2006 link2007 link2008 link2009 link2010 link2011 link2012 link2013 link2014 link2015 link2016 link2017 link2018 link2019 link2020 link2021 link2022 link2023 link2024 link2025 link2026 link2027 link2028 link2029 link2030 link2031 link2032 link2033 link2034 link2035 link2036 link2037 link2038 link2039 link2040 link2041 link2042 link2043 link2044 link2045 link2046 link2047 link2048 link2049 link2050 link2051 link2052 link2053 link2054

[Vue.js] Accessing parameter/dynamic URL property in router meta for dynamic page title? Subscribe to RSS

So there is for example this route in my routes:

{ name: ‘user’, path: ‘/user/:id’, component: User, props: { default: true, sidebar: false }, meta: { showFooter: false, title: `Viewing User ${}` } }

I’m essentially wanting to access the id parameter of the URL, to set the title of the page, but I do not want to do it via the component.

Using ${} returns undefined, is there an object I can access that will give me the same result? I’m relatively new to vue.js and Vue-router, so unsure if this is possible or not.

Maybe I should be setting this in the component, and if so I’m happy to learn why this is the better way to do it :)

Solution :

You can simplify this and just use a computed property in the component.

computed: {
title() { return `Viewing User ${this.$}` }

If you want to abstract the implementation (for multiple components, etc), set the meta data in beforeRouteUpdate. Then you can access this.$route.

beforeRouteUpdate (to, from, next) {
// called when the route that renders this component has changed,
// but this component is reused in the new route.
// For example, for a route with dynamic params `/foo/:id`, when we
// navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
// will be reused, and this hook will be called when that happens.
// *** has access to `this` component instance. ***

-> has access to this component instance